Echarts图给坐标轴加一个标识线markLine

最新推荐文章于 2025-06-27 15:51:18 发布

原创最新推荐文章于 2025-06-27 15:51:18 发布 · 置顶 · 4.5w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#echarts图markLine #echarts图标示线 #Echarts图加一个横向标示线

博客围绕Echart3数据可视化视图，介绍给坐标轴加标识线markLine的方法。当X轴为类型数据时，需给X轴加虚拟值‘0’，在markLine赋值起始位置放置虚拟数据，设置boundaryGap: 0让标示线从X轴起始位置开始，还提及设置data值及坐标轴内标示线的要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echart3数据可视化视图

给坐标轴加一个标识线markLine

当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性可以去Echarts官网查看。

这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值，y:”,容器内y的值}，如果要设置在坐标轴内的标示线，就要设置xAxis和yAxis.

代码如下

option ={
    xAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
            rotate: '35',
            fontSize: 10,
          },
          data: ['0', '2013年', '2014年', '2015年', '2016年', '2017年'],
          boundaryGap: 0,
        },
        yAxis: {
          name: '（单位/km）',
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
          },
          axisPointer: {
            lineStyle: {
              color: '#fff',
            },
            value: '140',
          },
        },
        grid: {
          top: '10%',
          bottom: '27%',
        },
        series: [{
          data: DataAll,
          type: 'scatter',
          symbolSize: function (parmas) {
            return Math.ceil(parmas[2] / 1000);
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[3] + param.data[4];
              },
              position: 'top',
            },
          },
          markLine: {
            data: [
              [
                { name: '标线1起点', xAxis: 0, yAxis: 300, symbol: 'circle'},
                { name: '标线1终点', xAxis: '2017年', yAxis: 300, symbol: 'circle' },
              ],
            ],
            label: {
              normal: {
                show: true,
                position: 'middle',
                formatter: '节能与新能源汽车技术路线图2020年目标',
              },
            },
            lineStyle: {
              normal: {
                type: 'solid',
                color: '#fff',
              },
            },
          },
          itemStyle: {
            normal: {
              color: '#0fefee',
            },
          },
        }],
}

效果图

这里写图片描述