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

悠悠 2022-05-15 12:16 1561阅读 0赞

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

## 效果图 ##

![这里写图片描述][70]

[70]: /images/20220515/195660eeb2ff42958841376bd94f0731.png