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

博客围绕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',
            },
          },
        }],
}

效果图

这里写图片描述

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值