当前位置: 首页 > Web前端 > HTML

实现echarts绘制带连接线的直方图

时间:2023-03-28 13:25:20 HTML

实现Echarts绘制带连接线的柱状图,通过markLine辅助线设置,x,y代表坐标实现代码:constlabelRight={position:'right'};option={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{类型:'值'},系列:[{数据:[120、200、150、80、70、110、130],类型:'bar',markLine:{符号:'无',lineStyle:{颜色:'蓝色',type:'solid',width:4,},数据:[[{x:'19.6%',y:'41.5%'},{x:'23%',y:'7.6%'}],[{x:'31.5%',y:'7.6.4%'},{x:'35%',y:'29%'}],//自己计算百分比]}}]};实现效果: