Echarts添加一条垂直于x轴的直线

最新推荐文章于 2025-04-01 14:57:03 发布

原创最新推荐文章于 2025-04-01 14:57:03 发布 · 1.3w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何使用ECharts的markLine属性来绘制平行于y轴的直线，适用于展示特定x轴坐标上的数据变化趋势。通过设置data属性中的两个坐标点，可以灵活地在图表中添加自定义的直线。

series:[{
	name: '平行于y轴的趋势线',
    type: 'line',
    markLine: {
        itemStyle: {      //盒须图样式。
        },
        name: 'cc',
        //yAxisIndex: 0,
        // symbol:'none',//去掉箭头
        data: [[
            { coord: ['x轴坐标', 0] },
            { coord: ['x轴坐标',y轴值] }
        ]]
    }
}]

利用echarts的markLine属性可以做出想要的直线，markLine下data的两个coord代表着坐标系中的两个点连成的直线。
coord中的值类型分为字符串型和数字型，数字型为坐标的索引，字符串为当前值。

注：官网中的在线定制文档最基础部分不包含支持markLine属性，需要手动选择。