实现Echarts绘制带有连接线的柱状图
通过markLine辅助线来设置,x、y表示坐标
实现代码:
const labelRight = {
position: 'right'
};
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
markLine: {
symbol: 'none',
lineStyle: {
color: 'blue',
type: 'solid',
width: 4,
},
data: [
[{
x: '19.6%',
y: '41.5%'
},
{
x: '23%',
y: '7.6%'
}],
[{
x: '31.5%',
y: '7.6.4%'
},
{
x: '35%',
y: '29%'
}], // 自己去计算百分比
]
}
}]
};
实现效果: