import { MarkPointComponent, MarkLineComponent } from 'echarts/components'
echarts.use([MarkPointComponent, MarkLineComponent])
如果你已经引入echarts ,却无法显示平均值的线,请尝试引入上述组件
let obj2 = {
date: ['2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31'],
data: [7, 8, 9, 3, 2, 1]
}
handleOption_1_2(obj2)
function handleOption_1_2(data) {
config.option_1_2 = {
title: {
text: '新增当量趋势'
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: {
type: 'category',
data: data.date,
axisLabel: {
interval: 0,
rotate: 30
// textStyle: {
// color: 'white' // 设置横坐标文字颜色为红色
// }
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
data: data.data,
type: 'line',
markLine: {
symbol: ['none', 'none'],
data: [
{
type: 'average',
name: '平均值',
lineStyle: {
//标注线样式
normal: {
type: 'dotted',
color: '#000' //标注线颜色
}
},
label: {
show: true,
position: 'middle', // 表现内容展示的位置
formatter: '{a|平均值 : }{b|{c}}', // 标线展示的内容
rich: {
a: {
// fontSize: '20px'
backgroundColor: 'transparent'
},
b: {
backgroundColor: 'transparent'
}
}
}
},
{
type: 'max',
name: '最大值',
// symbol: ['none', 'none'],
lineStyle: {
//标注线样式
normal: {
type: 'dotted',
color: '#000' //标注线颜色
}
},
label: {
show: true,
position: 'left',
formatter: '{a|上限(UCL) : }{b|{c}}',
rich: {
a: {
backgroundColor: 'transparent',
color: '#000'
},
b: {
backgroundColor: 'transparent',
color: '#000'
}
},
padding: [120, 0, 0, 60]
}
},
{
type: 'min',
name: '最小值',
symbol: 'none',
lineStyle: {
//标注线样式
normal: {
type: 'dotted',
color: '#000' //标注线颜色
}
},
label: {
show: true,
position: 'end',
formatter: '{a|下限(UCL) : }{b|{c}}',
rich: {
a: {
backgroundColor: 'transparent',
color: '#000'
},
b: {
backgroundColor: 'transparent',
color: '#000'
}
},
padding: [0, 0, 25, -80]
}
}
]
}
}
]
}
}
运行后如下图所示,根据实际情况进行位置调整