实现echarts绘制带有连接线的柱状图

发布时间:2023-04-02 16:00

实现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%'
                    }], // 自己去计算百分比
                ]
        }
    }]
};

实现效果:

实现echarts绘制带有连接线的柱状图_第1张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号