在项目中遇到一个需求：为设置的平均线（markLine配置的），设置图例显示
解决方案：
方案一： 通过设置一个新的series，以增加图例，之后调整这个图例效果即可
series不设置数据，type: 'line'然后其图例就会出现有圆环和线的效果：
此时再设置圆环为
symbol: 'transparent'，图例线条设置为type: 'dotted'然后就可以得到如上“平均线”的效果。
此方案在legend点击后会出现圆点，如需要与legend交互，请选择第二种方案。
完整配置如下，关键部分用/* TIP：... */标注：
const data = [50, 64, 96, 80, 70, 82, 73];
const meanValue = data.reduce((pre, cur) => pre + cur, 0) / data.length;
option = {
tooltip: {},
legend: {
data: [
{ name: 'Sale' },
{ /* TIP: 设置虚线 */
name: '平均线',
lineStyle: {
type: 'dotted',
width: 3,
color: '#67FFF6'
}
}
],
selectedMode: false, //图例选择模式关闭
},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
name: 'Sale',
type: 'bar',
data,
markLine: {
lineStyle: {
color: '#00DEE4',
width: 3,
height: 14
},
data: [
{
yAxis: meanValue
}
],
label: {
position: 'insideEndTop',
formatter: (params) => '平均值：' + params.value,
padding: [0, 20, 0, 0],
fontSize: 18,
distance: 0
}
}
},
{ /* TIP: 增加的series */
type: 'line',
symbol: 'none',
name: '平均线',
color: 'transparent'
}
]
};
