如何用Echart绘制带有连接线的柱状图

新手上路,请多包涵

echarts绘制图表非常方便。
但是我现在有一个需求,是需要绘制柱状图之间带有连接线的图标。
如图所示:
clipboard.png
并且在连接区域内可添加变化内容。
请问一下,目前的echarts能否完成这个工作。

阅读 7.9k
1 个回答
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: '20%',
                        y: '42.5%'
                    },
                    {
                        x: '22.6%',
                        y: '11.4%'
                    }],
                    [{
                        x: '31.8%',
                        y: '11.4%'
                    },
                    {
                        x: '34%',
                        y: '31%'
                    }], // 自己去计算百分比
                ]
        }
    }]
};

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏