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

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',
            },
          },
        }],
}

效果图