ECharts中实现x轴中的坐标以不同间距显示的效果

1、需求描述

我们日常在使用ECharts实现曲线图或柱状图的时候，x轴上的坐标都是等距离显示的。

有时候我们可能有这个需求：

x轴上的坐标距离按照对应数据的比例进行显示。

打个比方，假设x轴上有5个点，正常情况下，我们每个点之间的距离都是30px。

这不是我们想要的效果，我们想要的效果是，第一个点和第二个点之间的距离为30px，第二个点和第三个点之间的距离为50px，第三个点和第四个点之间的距离为87px，第四个点和第五个点之间的距离为111px……，也就是根据每个点的具体业务需求（间隔的实际距离）来动态显示间隔的距离。

---

2、具体实现

实现思路：

• 先隐藏x轴相关默认设置；
• 在通过markLine属性来绘制x轴数据。

2.1、隐藏x轴相关默认设置

首先，我们应该隐藏掉x轴默认的显示，具体设置如下：

  xAxis: {
    type: 'value',
    axisTick: { show: false }, //隐藏刻度线
    axisLabel: { show: false }, //隐藏刻度值
    //网格线，参考文档：https://echarts.apache.org/zh/option.html#xAxis.splitLine
    splitLine: {
      show: false //隐藏分割线
    }
  },

2.2、设置y轴相关设置

y轴相关设置如下所示：

  yAxis: [
    {
      type: 'value'
    }
  ],

2.3、设置series

接下来我们就可以在series设置markLine来实现x轴坐标数据自定义间隔距离了，具体设置如下所示：

  series: [
    {
      name: '图例1',
      type: 'line',
      z: 10, //控制曲线的浮动层级，避免在markLine下方被遮住
      data: [
        [0.312, 0],
        [0.426, 43],
        [0.582, 52],
        [0.795, 53],
        [1.077, 60],
        [1.472, 62],
        [2.016, 73],
        [2.745, 76],
        [3.193, 85],
        [3.482, 87],
        [3.762, 95],
        [4.37, 100],
        [4.723, 100],
        [5.109, 100]
      ],
      markLine: {
        symbol: '', //取消箭头
        silent: true, //取消鼠标hover事件
        label: {
          //标线的文本，模拟x轴显示的内容
          position: 'start', //改变label位置
          rotate: 45, //设置文字旋转度数（注意：ECharts官网文档居然没有rotate这个属性的说明）
          // backgroundColor:'#fff'
          // color:'#f00',//文字颜色
          formatter: (data) => {
            return data.name;
          }
        },
        lineStyle: { color: '#e0e6f1', type: 'solid' },
        data: [
          {
            name: '0.075',
            xAxis: 0.312
          },
          {
            name: '0.15',
            xAxis: 0.426
          },
          {
            name: '0.3',
            xAxis: 0.582
          },
          {
            name: '0.6',
            xAxis: 0.795
          },
          {
            name: '1.18',
            xAxis: 1.077
          },
          {
            name: '2.36',
            xAxis: 1.472
          },
          {
            name: '4.75',
            xAxis: 2.016
          },
          {
            name: '9.5',
            xAxis: 2.475
          },
          {
            name: '13.2',
            xAxis: 3.193
          },
          {
            name: '16',
            xAxis: 3.482
          },
          {
            name: '19',
            xAxis: 3.762
          },
          {
            name: '26.5',
            xAxis: 4.37
          },
          {
            name: '31.5',
            xAxis: 4.723
          },
          {
            name: '37.5',
            xAxis: 5.109
          }
        ]
      }
    }
  ]

说明：

• z：控制曲线的浮动层级，如果不设置，到时候曲线显示的层级会在markLine线条的下方，会被遮住；
• data：控制x轴坐标的数据源以及对应y轴的数据，如[37.5, 100]代表x轴的坐标点在37.5这个位置的时候y轴的数据为100；
• markLine：自定义绘制的x轴坐标数据
  • symbol：取消绘制的箭头符号；
  • silent：取消鼠标hover事件；
  • label.position：绘制的x轴文本显示的位置；
  • label.formatter：自定义显示绘制的x轴文本内容；
  • lineStyle：绘制的样式；
  • data：要显示的x轴数据，xAxis需要和series.data中的数组中的第一个值保持一致，name为x轴上展现的内容。

2.4、最终效果

最终效果如下图所示：

---

3、完整代码

【2.4、最终效果】中的完整实现代码（下面的完整代码包含了一些其他设置，如：图例、图例默认显示图否、线条的颜色、自定义提示框等设置，如果不需要可自行移除），如下所示（可将如下代码直接复制到ECharts官网在线编辑器中运行查看）：

option = {
  grid: {
    // show: true,//是否显示外边框线
    // borderColor: '#f00',//外边框线颜色
    top: 45,
    left: 30,
    right: 5,
    bottom: 45,
    containLabel: true
  },
  //提示框组件，参考文档：https://echarts.apache.org/zh/option.html#tooltip
  tooltip: {
    trigger: 'axis',
    formatter: function (datas, ticket) {
      return datas && datas[0].data.length > 1
        ? datas[0].seriesName +
            '（' +
            datas[0].data[0] +
            '）' +
            '：' +
            datas[0].data[1] +
            'kg'
        : datas[0].data;
    }
  },
  //顶部的标题，参考文档：https://echarts.apache.org/zh/option.html#title
  title: [
    {
      show: true,
      text: 'ZZZZ标准曲线图',
      left: 'center',
      top: 5,
      textStyle: {
        fontSize: 18,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: 'XXXX尺寸（mm）',
      left: 'center',
      bottom: 5,
      textStyle: {
        fontSize: 12,
        fontWeight: 'normal'
      }
    }
  ],
  //图例，参考文档：https://echarts.apache.org/zh/option.html#legend
  legend: {
    left: 'right',
    data: ['图例1', '图例2'],
    selected: {
      图例1: true, //显示
      图例2: false //不显示
    },
    selectedMode: 'multiple' //用于控制图例的选择模式（single：单选、multiple：多选、false：禁止选择）
  },
  xAxis: {
    type: 'value',
    axisTick: { show: false }, //隐藏刻度线
    axisLabel: { show: false }, //隐藏刻度值
    //网格线，参考文档：https://echarts.apache.org/zh/option.html#xAxis.splitLine
    splitLine: {
      show: false //隐藏分割线
    }
  },
  yAxis: [
    {
      type: 'value',
      name: 'YYYY测试标题',
      nameGap: 30,
      nameRotate: 90,
      nameLocation: 'middle',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e0e6f1', //'#e0e6f1',
          type: 'solid'
        }
      },
      splitNumber: 10 //设置y轴分隔的段数，如0~100之间默认情况可能会按照0、20、40、60……的间隔显示，设置相应的数字后就会根据实际情况显示的更细，如0、10、20、30……
    }
  ],
  series: [
    {
      name: '图例1',
      type: 'line',
      //设置数据点形状（实心），参考文档：https://echarts.apache.org/zh/option.html#series-line.symbol
      symbol: 'circle',
      z: 10, //控制曲线的浮动层级，避免在markLine下方被遮住
      //线条的颜色
      lineStyle: {
        color: '#409EFF'
        //线条类型（solid：实线、dashed：粗虚线、dotted：细虚线）
        // type: 'dotted',
      },
      //线条上数据点的颜色
      itemStyle: {
        color: '#409EFF'
      },
      //曲线数据点的设置，参考文档：https://echarts.apache.org/zh/option.html#series-line.label
      label: {
        show: true, //显示曲线上的某个点的数值
        formatter: function (data) {
          return data.value && data.value.length > 1
            ? data.value[1] + 'kg'
            : data.value;
        }
      },
      data: [
        [0.312, 0],
        [0.426, 43],
        [0.582, 52],
        [0.795, 53],
        [1.077, 60],
        [1.472, 62],
        [2.016, 73],
        [2.745, 76],
        [3.193, 85],
        [3.482, 87],
        [3.762, 95],
        [4.37, 100],
        [4.723, 100],
        [5.109, 100]
      ],
      markLine: {
        symbol: '', //取消箭头
        silent: true, //取消鼠标hover事件
        label: {
          //标线的文本，模拟x轴显示的内容
          position: 'start', //改变label位置
          rotate: 45, //设置文字旋转度数（注意：ECharts官网文档居然没有rotate这个属性的说明）
          // backgroundColor:'#fff'
          // color:'#f00',//文字颜色
          formatter: (data) => {
            return data.name;
          }
        },
        lineStyle: { color: '#e0e6f1', type: 'solid' },
        data: [
          {
            name: '0.075',
            xAxis: 0.312
          },
          {
            name: '0.15',
            xAxis: 0.426
          },
          {
            name: '0.3',
            xAxis: 0.582
          },
          {
            name: '0.6',
            xAxis: 0.795
          },
          {
            name: '1.18',
            xAxis: 1.077
          },
          {
            name: '2.36',
            xAxis: 1.472
          },
          {
            name: '4.75',
            xAxis: 2.016
          },
          {
            name: '9.5',
            xAxis: 2.475
          },
          {
            name: '13.2',
            xAxis: 3.193
          },
          {
            name: '16',
            xAxis: 3.482
          },
          {
            name: '19',
            xAxis: 3.762
          },
          {
            name: '26.5',
            xAxis: 4.37
          },
          {
            name: '31.5',
            xAxis: 4.723
          },
          {
            name: '37.5',
            xAxis: 5.109
          }
        ]
      }
    },
    {
      name: '图例2',
      type: 'line',
      symbol: 'circle',
      z: 10,
      lineStyle: {
        color: '#67C23A'
      },
      itemStyle: {
        color: '#67C23A'
      },
      data: [
        [0.212, 0],
        [0.326, 43],
        [0.482, 52],
        [0.695, 53],
        [0.977, 60],
        [1.372, 62],
        [1.916, 73],
        [2.645, 76],
        [3.093, 85],
        [3.382, 87],
        [3.662, 95],
        [4.27, 100],
        [4.623, 100],
        [5.009, 100]
      ],
      markLine: {
        symbol: '',
        silent: true,
        label: {
          position: 'start',
          rotate: 45,
          formatter: (data) => {
            return data.name;
          }
        },
        lineStyle: { color: '#e0e6f1', type: 'solid' },
        data: [
          {
            name: '0.065',
            xAxis: 0.212
          },
          {
            name: '0.05',
            xAxis: 0.326
          },
          {
            name: '0.2',
            xAxis: 0.482
          },
          {
            name: '0.5',
            xAxis: 0.695
          },
          {
            name: '1.08',
            xAxis: 0.977
          },
          {
            name: '2.26',
            xAxis: 1.372
          },
          {
            name: '4.65',
            xAxis: 1.916
          },
          {
            name: '9.4',
            xAxis: 2.375
          },
          {
            name: '12.2',
            xAxis: 3.093
          },
          {
            name: '15',
            xAxis: 3.382
          },
          {
            name: '18',
            xAxis: 3.662
          },
          {
            name: '25.5',
            xAxis: 4.27
          },
          {
            name: '30.5',
            xAxis: 4.623
          },
          {
            name: '36.5',
            xAxis: 5.009
          }
        ]
      }
    }
  ]
};