fpi-componentAppearance
TIP
由于新版网站正在重构 暂且先将样例维护在此 后期我们会统一迁移
样例
分段折线图
const option = {
title: {
text: '',
left: '0',
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontSize: 12,
fontFamily: 'TRENDS'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
grid: {
top: 30,
left: 40,
right: 10,
bottom: 30
},
xAxis: [
{
type: 'category',
data: ['2021-10', '2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10'],
axisLine: {
show: false
},
axisLabel: {
textStyle: {
fontFamily: 'TRENDS',
fontSize: '12',
color: 'rgba(255,255,255,0.5)'
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: '',
axisLabel: {
textStyle: {
fontFamily: 'TRENDS',
fontSize: 12,
color: 'rgba(255, 255, 255, 0.5)'
}
},
axisLine: {
show: false
},
splitArea: {
show: false
},
splitLine: { // 值分割线
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisTick: {
show: false
}
}
],
visualMap: { // 分段显示逻辑
top: 50,
right: 10,
show: false,
seriesIndex: 0,
pieces: [
{
min: 0.050000000000000044,
max: 1,
color: '#03A9F4'
},
{
min: 1.05,
max: 2,
color: '#1976D2'
},
{
min: 2.05,
max: 3,
color: '#85C940'
},
{
min: 3.05,
max: 4,
color: '#D9CD4C'
},
{
min: 4.05,
max: 5,
color: '#EF8E00'
},
{
min: 5.05,
max: 6,
color: '#E12214'
}
],
outOfRange: {
color: '#999'
}
},
series: {
name: '水质类别',
type: 'line',
symbol: 'circle',
symbolSize: 8, // 拐点大小 none 代表不显示
connectNulls: true, // 断线连接
showAllSymbol: true, // 显示所有拐点
smooth: true,
data: [null, null, null, null, 5, 3, 6, 4, 5, 4, 5, null, null],
markLine: {
data: [
{
yAxis: 4,
name: '目标线',
symbol: 'none',
label: {
show: true,
formatter: '{b}',
position: 'end',
distance: -35,
fontSize: 12,
lineHeight: 15,
padding: [2, 6, 0, 6],
color: '#FFFFFF',
backgroundColor: '#F84439',
borderRadius: 8
},
lineStyle: {
type: 'solid',
color: '#F84439',
width: 2
}
}
]
}
}
}
显示代码
自定义y轴和拐点
const xData = ['水', '煤', '电', '其他']
const yData = [6000, 2000, 1000, 1000]
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter(params: any) {
const str
= `<div><div>${params[0].axisValue}</div><div style='display:
flex;height:20px;align-items:center;'>${params[0].marker}
<div>${params[0].data}${params[0].seriesName}</div></div>`
return str
}
},
title: {
text: '实际碳排放总量',
top: 8,
padding: [0, 0, 0, 18],
textStyle: {
color: 'rgba(255,255,255,1)',
fontWeight: 700,
fontSize: 14
}
},
color: ['#e7dd17'],
grid: {
top: '60',
left: '50',
bottom: '30',
right: '20'
},
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
interval: 0
},
axisLine: {
lineStyle: {
color: '#038b8f'
}
},
data: xData
}
],
yAxis: [
{
name: '单位：（t）',
max: 10000,
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
nameLocation: 'start',
padding: [5, 0, 0, 0]
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(3,139,143,0.1)', 'rgba(255,255,255,0)']
},
interval: 1
},
axisLabel: {
color: 'rgba(255,255,255,0.6)',
fontFamily: 'Bebas Neue',
fontSize: 12,
formatter: (value: number) => {
return `${(value / 1000).toFixed(2)}k`
}
}
}
],
series: [
{
name: 't',
type: 'line',
// symbol: 'circle', //设定拐点为实心点
symbolSize: 8, // 设定拐点的大小
data: yData,
}
]
}
显示代码
多条折线拖动图
const option = {
dataZoom: [
{
backgroundColor: '#021e2d',
borderColor: '#021e2d',
dataBackground: {
areaStyle: {
opacity: 0,
},
lineStyle: {
color: '#03d5fb',
},
},
end: 100,
fillerColor: 'rgba(255, 255, 255, 0.1)',
height: 24,
moveHandleStyle: { opacity: 0 },
realtime: true,
selectedDataBackground: {
areaStyle: { opacity: 0 },
lineStyle: { color: '#03d5fb' },
},
show: true,
start: 70,
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontFamily: 'Bebas Neue',
},
top: '87%',
type: 'slider',
// xAxisIndex: [0, 1],
},
],
tooltip: {
link: { xAxisIndex: 'all' },
trigger: 'axis',
},
legend: {
top: 220,
left: 'center',
textStyle: {
fontSize: 14,
color: '#ffffff'
}
},
grid: {
top: 50,
left: 60,
right: 32,
bottom: 100
},
xAxis: {
axisLabel: {
show: true,
fontFamily: 'Bebas Neue',
fontSize: 12,
color: 'rgba(255,255,255,.6)'
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
},
},
axisTick: { show: false },
data: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09',
'2015-10', '2015-11', '2015-12', '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06',
'2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017-01', '2017-02', '2017-03',
'2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12',
'2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09',
'2018-10', '2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06',
'2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03',
'2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12',
'2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01'],
gridIndex: 0,
type: 'category',
},
yAxis: {
name: '单位：（t）',
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
nameLocation: 'start',
padding: [5, 0, 0, 0],
},
axisLabel: {
color: 'rgba(255,255,255,0.6)',
fontFamily: 'Bebas Neue',
fontSize: 12,
formatter: (value: number) => {
return `${(value / 1000).toFixed(2)}k`
},
},
axisLine: {
show: false,
lineStyle: { color: 'rgba(255,255,255,0.5)' },
},
axisTick: { show: false },
gridIndex: 0,
splitArea: { show: true, areaStyle: { color: ['rgba(3, 139, 143, 0.1)', 'rgba(0, 0, 0, 0)'] } },
splitLine: { show: false },
type: 'value',
},
color: ['#03d5fb', '#ffd902', '#00c164', '#8c2194', '#6dc8ec', '#e86452', '#479292'],
series: [
{
data: [182.43, 331.93, 280.81, 306.58, 175.65, 255.62, 296.47,
200.29, 328.7, 362.27, 262.62, 207.44, 293.15, 228.11, 255.78, 201.57,
343.41, 501.33, 498.48, 245.99, 286.61, 376.92, 326.08, 247.09, 482.85,
423.43, 505.87, 266.3, 403.53, 309.25, 424.08, 261.61, 272.59, 371.21,
398.12, 396.44, 247.97, 422.56, 386.74, 301.53, 619.63, 327.24, 437.38,
396.34, 437.26, 509.46, 480.18, 364.14, 295.89, 454.31, 446.57, 430.51,
409.9, 307.79, 637.78, 550.48, 525.59, 741.72, 743.59, 1373.45, 705.16,
564.36, 313.02, 520.78, 321.25, 414.22, 968.89, 988.12, 591.68, 924.52,
298.81, 975.16, 442.93, 378.51, 450.52, 439.35, 466.52, 431.31, 568.86,
495.26, 453.81, 320.52, 373.43, 294.15, 488.52],
// itemStyle: {
// normal: {
// borderColor: '#03d5fb',
// color: '#fff',
// lineStyle: { color: '#03d5fb' },
// },
// },
name: '电',
symbol: 'circle',
symbolSize: 6,
type: 'line',
},
{
data: [182.43, 331.93, 280.81, 306.58, 175.65, 255.62, 296.47,
200.29, 328.7, 362.27, 262.62, 207.44, 293.15, 228.11, 255.78, 201.57,
343.41, 501.33, 498.48, 245.99, 286.61, 376.92, 326.08, 247.09, 482.85,
423.43, 505.87, 266.3, 403.53, 309.25, 424.08, 261.61, 272.59, 371.21,
398.12, 396.44, 247.97, 442.56, 386.74, 301.53, 161.63, 327.24, 437.38,
396.34, 437.26, 509.46, 480.18, 364.14, 295.89, 454.31, 446.57, 430.51,
409.9, 307.79, 637.78, 550.48, 525.59, 741.72, 743.59, 373.45, 705.16,
564.36, 313.02, 320.78, 321.25, 414.22, 968.89, 988.12, 591.68, 924.52,
298.81, 975.16, 442.93, 378.51, 250.52, 439.35, 466.52, 431.31, 568.86,
495.26, 453.81, 320.52, 373.43, 294.15, 488.52],
name: '气',
symbol: 'circle',
symbolSize: 6,
type: 'line',
},
]
}
显示代码
自定义legend 和 阴影效果
const xData = ['09.26 10:00', '09.26 10:20', '09.26 10:40', '09.26 11:00', '09.26 11:20', '09.26 11:40', '09.26 12:40', '09.26 13:00', '09.26 13:20', '09.26 13:40', '09.26 14:00', '09.26 14:20', '09.26 14:40', '09.26 15:00', '09.26 15:20', '09.26 15:40', '09.26 16:00', '09.26 16:20', '09.26 16:40', '09.26 17:00', '09.26 17:20', '09.26 12:00', '09.26 12:20']
const yData = [0.02, 0.04, 0.12, 0.1, 0.1, 0.09, 0.12, 0.15, 0.25, 0.3, 0.46, 0.2, 0.3, 0.5, 0.8, 0.6, 0.8, 0.5, 0.5, 0.8, 2, 2, 2.1]
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter(params: any) {
const str = `<div><div>${params[0].seriesName}</div><div
style='display:
flex;height:20px;align-items:center;'>${params[0].marker}
<div>${params[0].axisValue}：${params[0].data}mm</div></div>`
return str
}
},
title: {
text: '化学需氧量 过去24小时趋势变化',
left: 'center',
textStyle: {
color: 'white',
fontFamily: 'TRENDS',
fontSize: 12
}
},
color: ['#00DDFF'],
grid: {
top: '50',
left: '30',
bottom: '35',
right: '10'
},
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 12,
// interval: 0, // 强制显示所有x轴标签
fontFamily: 'TRENDS'
},
axisLine: {
lineStyle: {
color: '#038b8f'
}
},
data: xData
}
],
yAxis: [
{
name: 'mm',
nameTextStyle: {
fontFamily: 'TRENDS',
color: 'rgba(255, 255, 255, 0.6)',
fontSize: '12px',
align: 'center'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
// x轴竖线
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)'
// type: 'dashed',
},
},
axisLabel: {
color: 'rgba(255,255,255,0.7)',
fontFamily: 'TRENDS',
fontSize: 12,
}
}
],
series: [
{
name: '化学需氧量',
type: 'line',
// smooth: true, // 折线平滑
data: yData,
symbolSize: 'none', // 设定拐点的大小
lineStyle: {
// 设置折线颜色
color: '#00DDFF'
},
areaStyle: {
// 阴影颜色渐变
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 221, 255, 0.7)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 221, 255, 0)' // 0% 处的颜色
}
],
globalCoord: false, // 缺省为 false
}
}
},
markLine: {
symbol: 'none', // 去掉箭头
data: [
{
yAxis: 0.5,
name: '标准值',
symbol: 'none',
label: {
show: true,
formatter: '{b}',
position: 'middle',
distance: -8,
fontSize: 12,
lineHeight: 15,
padding: [2, 6, 0, 6],
color: '#FFFFFF',
backgroundColor: '#F84439',
borderRadius: 8
},
lineStyle: {
type: 'solid',
color: '#F84439',
width: 2
}
},
]
}
}
]
}
显示代码
区域阴影，分割线虚线
const xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月']
const seriesData = [20, 30, 45, 50, 60, 80]
const lineChart = {
grid: {
top: 30,
bottom: 40,
right: 0
},
legend: {
show: false,
},
tooltip: {
trigger: 'axis',
// 设置显示的文字内容
formatter: (args: any) => {
return `${args[0].name}：${args[0].value}万元`
}
},
backgroundColor: 'rgba(23, 31, 39, 1)', // 设置echarts图背景色
yAxis: {
splitLine: {
// 设置y轴分割线为虚线
lineStyle: {
type: 'dashed', // y轴分割线类型 虚线
color: 'rgb(61, 76, 83)'
}
},
axisLine: {
// 不显示y轴线
show: false
},
// 不显示y轴的小刻度
axisTick: {
// 不显示y轴小刻度线
show: false
},
// 把刻度标签里面的文字颜色设置为黑色
axisLabel: {
// y轴文本白色
color: 'white'
}
},
xAxis: {
data: xAxisData,
axisLine: {
lineStyle: {
color: 'rgb(61, 76, 83)'
}
},
// 不显示y轴的小刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为黑色
axisLabel: {
color: 'white'
}
},
series: {
name: '张三',
type: 'line',
data: seriesData,
lineStyle: {
// 设置折线颜色
color: 'rgba(12, 170, 174,1)'
},
areaStyle: {
// 阴影颜色渐变
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(12, 170, 174,0.8)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(12, 170, 174,0)' // 0% 处的颜色
}
],
globalCoord: false, // 缺省为 false
}
}
}
}
}
显示代码
平滑折线阴影+markline
const xData = ['五常', '仁和', '良渚', '闲林', '仓前', '余杭', '百丈']
const yData = [7.66, 6, 2.44, 8, 5, 8.66, 7]
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter(params: any) {
const str = `<div><div>${params[0].axisValue}</div><div
style='display:
flex;height:20px;align-items:center;'>${params[0].marker}
<div>${params[0].data}${params[0].seriesName}</div></div>`
return str
}
},
color: ['#03d5fb'],
grid: {
top: '16',
left: '30',
bottom: '30',
right: '10'
},
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
interval: 0,
fontFamily: 'TRENDS'
},
axisLine: {
lineStyle: {
color: '#038b8f'
}
},
data: xData
}
],
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
// x轴竖线
lineStyle: {
color: 'rgba(255,255,255,.2)'
// type: 'dashed',
},
},
axisLabel: {
color: 'rgba(255,255,255,0.5)',
fontFamily: 'TRENDS',
fontSize: 12,
}
}
],
series: [
{
name: 'mm',
type: 'line',
smooth: true, // 折线平滑
connectNulls: true, // 断线连接
barWidth: 13,
data: yData,
symbolSize: 'none', // 设定拐点的大小
itemStyle: {
show: false
},
lineStyle: {
// 设置折线颜色
color: '#00DDFF'
},
areaStyle: {
// 阴影颜色渐变
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 221, 255, 0.7)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 221, 255, 0)' // 0% 处的颜色
}
],
globalCoord: false, // 缺省为 false
}
}
},
markLine: {
symbol: 'none', // 去掉箭头
data: [
{
yAxis: 5.66,
name: '5.66m',
label: {
show: true,
formatter: '{b}',
position: 'insideEndBottom',
// distance: -35,
fontSize: 12,
lineHeight: 15,
fontFamily: 'Furore',
// padding: [40, 0, 0, 0],
color: 'rgba(255, 153, 2, 1)',
// borderRadius: 8
},
lineStyle: {
type: 'dashed',
color: 'rgba(255, 153, 2, 1)',
width: 2
}
},
{
yAxis: 6.66,
name: '6.66m',
label: {
show: true,
formatter: '{b}',
position: 'insideEndTop',
fontSize: 12,
lineHeight: 15,
color: 'rgba(248, 68, 57, 1)',
fontFamily: 'Furore'
},
lineStyle: {
type: 'dashed',
color: 'rgba(248, 68, 57, 1)',
width: 2
}
},
{
yAxis: 2,
name: '2m',
label: {
show: false,
},
lineStyle: {
type: 'dashed',
color: 'white',
width: 2
}
}
]
}
}
]
}
显示代码
翻转+区域阴影+自定义legend折线
const xAxis = ['2022-08-01 03', '2022-08-01 04', '2022-08-01 05', '2022-08-01 06', '2022-08-01 07', '2022-08-01 08', '2022-08-01 09', '2022-08-01 10', '2022-08-01 11', '2022-08-01 12', '2022-08-01 13', '2022-08-01 14', '2022-08-01 15']
const seriesData = {
temperature: [15.5, 8.5, 1.2, 8.5, 17.4, 25.8, 20.8, 25.8, 15.8, 8.5, 25.8, 14.6, 30.8],
rain: [0.02, 0.85, 1.74, 1.55, 2.58, 0.85, 2.58, 2.08, 1.58, 0.85, 3.08, 2.58, 1.46]
}
const option = {
grid: {
top: 30,
right: 32,
bottom: 50,
left: 30
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
textStyle: {
color: '#b9cfe2',
fontFamily: 'PingFang SC'
},
formatter: (params: any[]) => {
let str = `<div>${params[0].axisValue}</div>`
params.forEach((item: any, index: number) => {
let unit = ''
if (index === 0)
unit = 'mm'
else if (index === 1)
unit = '°C'
str += `<div>${item.marker}${item.seriesName}：${item.value
? item.value
: '--'}${unit}</div>`
})
return str
}
},
legend: {
show: true,
bottom: 5,
inactiveColor: 'rgba(255,255,255,0.5)',
textStyle: {
color: 'rgba(255,255,255,1)'
},
itemHeight: 2,
itemWidth: 16,
data: [
{
name: '温度',
icon: 'rect',
},
{
name: '降雨量',
icon: 'rect',
}
]
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.5)'
}
},
axisLabel: {
show: true,
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: '12',
color: 'rgba(255,255,255,0.6)'
},
formatter: (value: string) => {
return value.slice(-2)
}
},
axisTick: {
show: false
},
data: xAxis
},
yAxis: [
{
type: 'value',
name: '°C',
// nameLocation: 'start',
nameTextStyle: {
align: 'right',
padding: [-110, 0, 0, 0]
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: '12',
color: 'rgba(255,255,255,0.6)'
}
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.5)'
}
},
axisPointer: {
snap: true
},
splitLine: { show: false },
axisTick: { show: false },
inverse: true // 折线翻转
},
{
type: 'value',
name: 'mm',
nameTextStyle: {
align: 'left',
padding: [0, 0, -10, 0]
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: '12',
color: 'rgba(255,255,255,0.6)'
}
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.5)'
}
},
axisPointer: {
snap: true
},
splitLine: { show: false },
axisTick: { show: false }
}
],
series: [
{
name: '温度',
type: 'line',
showSymbol: false, // 不显示点
yAxisIndex: 0,
lineStyle: {
color: 'rgba(255, 180, 67, 1)',
opacity: 1,
width: 0.5
},
areaStyle: {
color: 'rgba(255, 180, 67, .5)'
},
data: seriesData.temperature
},
{
name: '降雨量',
type: 'line',
showSymbol: false, // 不显示点
yAxisIndex: 1,
areaStyle: {
color: 'rgba(0, 221, 255, .5)'
},
markPoint: {
show: false,
},
lineStyle: {
color: 'rgba(0, 221, 255, 1)',
opacity: 1,
width: 0.5
},
data: seriesData.rain
}
]
}
显示代码
不同颜色折线图
const goodData = [100, 100, 99, 98, 95]
const targetDate = [100, 100, 100, 100, 100]
const option = {
grid: {
top: '90',
left: '50',
bottom: '30',
right: '40'
},
title: {
text: 'title',
left: 90,
top: 20,
textStyle: {
fontSize: 20,
color: '#FFFFFF'
}
},
tooltip: {
trigger: 'axis',
formatter: (arg: any) => {
return `${arg[0].seriesName} ${arg[0].value}%`
}
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
data: [2017, 2018, 2019, 2020, 2021],
axisLabel: {
color: 'rgba(255, 255, 255, 0.6)',
fontFamily: 'Microsoft YaHei',
fontSize: 14,
fontWeight: 'bold'
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
}
},
yAxis: {
name: '%',
nameTextStyle: {
fontFamily: 'Bebas Neue',
fontSize: 14,
color: 'rgba(255, 255, 255, 0.6)',
padding: [0, 25, 0, 0] // 设置位置
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
splitArea: { // 背景斑马纹
show: true,
areaStyle: {
color: ['rgba(255,255,255,0)',
'rgba(3,139,143,0.1)']
},
interval: 1
},
axisLabel: {
show: true,
color: 'rgba(255,255,255,0.6)',
fontFamily: 'Bebas Neue',
fontSize: 14
}
},
series: [
{
name: '达标率',
type: 'line',
data: goodData,
itemStyle: {
normal: {
label: {
show: true,
formatter: (arg: any) => {
if (arg.data < targetDate[arg.dataIndex]) return ''
return arg.data
},
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#00e87e'
}
}
}
}
},
{
name: '达标率',
type: 'line',
symbol: 'circle',
symbolSize: 6,
data: goodData,
lineStyle: {
normal: {
color: '#ffffff', // 折线的颜色
width: '2' // 折线粗细
}
},
itemStyle: {
normal: {
color: (arg: any) => {
if (arg.data < targetDate[arg.dataIndex]) return '#E12234'
else return '#00e87e'
},
label: {
show: true,
formatter: (arg: any) => {
if (arg.data >= targetDate[arg.dataIndex]) return ''
return arg.data
},
textStyle: {
fontSize: 18,
color: 'red',
fontWeight: 'bold'
}
}
}
}
}
]
}
显示代码
双标准线折线图
const xData = ['2022-09-21 00:00', '2022-09-21 01:00', '2022-09-21 02:00', '2022-09-21 03:00', '2022-09-21 04:00', '2022-09-21 05:00', '2022-09-21 06:00', '2022-09-21 07:00', '2022-09-21 08:00', '2022-09-21 09:00', '2022-09-21 10:00', '2022-09-21 11:00', '2022-09-21 12:00', '2022-09-21 13:00', '2022-09-21 14:00', '2022-09-21 15:00', '2022-09-21 16:00', '2022-09-21 17:00', '2022-09-21 18:00', '2022-09-21 19:00', '2022-09-21 20:00', '2022-09-21 21:00', '2022-09-21 22:00', '2022-09-21 23:00', '2022-09-22 00:00', '2022-09-22 01:00', '2022-09-22 02:00', '2022-09-22 03:00', '2022-09-22 04:00', '2022-09-22 05:00', '2022-09-22 06:00', '2022-09-22 07:00', '2022-09-22 08:00', '2022-09-22 09:00', '2022-09-22 10:00', '2022-09-22 11:00', '2022-09-23 00:00', '2022-09-23 01:00', '2022-09-23 02:00', '2022-09-23 03:00', '2022-09-23 04:00', '2022-09-23 05:00', '2022-09-24 00:00', '2022-09-24 01:00', '2022-09-24 02:00', '2022-09-24 03:00', '2022-09-24 04:00', '2022-09-24 05:00', '2022-09-25 00:00', '2022-09-25 01:00', '2022-09-25 02:00', '2022-09-25 03:00', '2022-09-25 04:00', '2022-09-25 05:00', '2022-09-26 00:00', '2022-09-26 01:00', '2022-09-26 02:00', '2022-09-26 03:00', '2022-09-26 04:00', '2022-09-26 05:00']
const data = ['2', '1', '15', '4', '13', '8', '3', '2', '1', '7', '5', '24', '5', '0', '5', '0', '36', '18', '7', '9', '5', '8', '37', '3', '2', '1', '15', '4', '13', '8', '7', '9', '5', '8', '37', '3', '3', '2', '1', '7', '5', '24', '5', '0', '5', '0', '36', '18', '7', '9', '5', '8', '37', '3', '5', '0', '5', '0', '36', '18']
const option = {
title: {
show: true,
text: 'N/P(100%)',
textAlign: 'left',
left: 10,
top: 10,
textStyle: {
color: 'rgba(255,255,255,0.6)',
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
show: false
},
grid: {
top: 70,
left: '6%',
right: '14%',
bottom: '5%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: xData,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,1)',
},
},
axisLabel: {
// interval: 0,
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: '16',
fontWeight: 'normal',
color: 'rgba(255,255,255,1)',
},
formatter: (params: string) => {
return params.substr(5, 5)
},
},
axisTick: {
show: false,
interval: 24,
},
},
],
yAxis: [
{
type: 'value',
name: '%',
nameTextStyle: {
color: 'rgba(255,255,255,1)',
align: 'center',
padding: [0, 25, 0, 0],
fontSize: 16
},
axisLabel: {
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: 16,
fontWeight: 'normal',
color: 'rgba(255,255,255,0.6)',
},
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)',
},
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(3, 139, 143, 0.1)', 'transparent'],
},
},
splitLine: { show: false },
axisTick: { show: false },
},
],
series: [
{
name: '趋势',
type: 'line',
data,
markLine: {
symbol: 'none',
data: [
{
silent: false,
lineStyle: {
type: 'solid',
color: '#f54455'
},
label: {
position: 'end',
formatter: 'P限制限值',
backgroundColor: '#f54455',
color: '#fff',
borderRadius: 20,
padding: [3, 7]
},
yAxis: 9
},
{
silent: false,
lineStyle: {
type: 'solid',
color: '#f54455'
},
label: {
position: 'end',
formatter: () => {
return 'N限制限值'
},
backgroundColor: '#f54455',
color: '#fff',
borderRadius: 20,
padding: [3, 7]
},
yAxis: 22.6
},
]
},
axisLabel: {
textStyle: {
fontFamily: 'Bebas Neue',
fontSize: '16',
fontWeight: 'normal',
},
},
lineStyle: {
color: '#00e87e',
},
itemStyle: {
color: '#00e87e',
},
splitLine: { show: false },
axisTick: { show: false },
}
]
}
显示代码