Echarts 配置不等间距坐标轴刻度方案记录

2024-11-28 来源：个人技术集锦

需求

图表x轴的是不等间距的。比如，仅需展示2,5,10,20,50的刻度。

展示数据的横坐标是天数、年份等数值，且不固定。使用类目轴（category）去实现，则每个类目间的距离是相同的。

方案评估整理

1. 用html dom元素绘制（未实践）

计算好位置，用border画出刻度虚线，position:absolute与图表位置重合。

canvas / svg 会用的话，也可以用这两种技术去画线。然后定位与echarts 重合。

2. 用xAxis.type:'category' 类目轴去模拟（有局限）

因为类目轴可以通过 splitLine.interval , 传入回调方法，控制坐标分割线是否展示。
通过axisLabel.formatter, 传入回调方法，控制坐标刻度值是否显示。

根据类目轴中每个类目的刻度间距相同，想要实现不等间距，则需要补点。
举例：
假设得到横坐标值[ 1，2，5 ]，若直接展示，则1-2-5间距是相同的。
而实际上2-5间距是1-2间距的3倍。因此需要在2-5中间补充两个空点。最终为[ 1, 2, 3, 4, 5 ]。
最后仅展示1、2、5 的刻度值和分割线就可以了。

已尝试，存在问题：

存在小数时，补点数量过多，性能有影响。就比如最小单位为0.01时，则要在0-1之间确保有100个点，多退少补。

3.用echarts的markLine 配置项来画线

这是本文主要介绍的内容。

最后还是得使用xAxis.type: 'value' 数值轴绘制，因为生成的曲线的点自动是非等间距的。

使用echarts markLine 配置项模拟不等间距坐标轴

markLine 是配置在series中的，markLine.data = [ { xAxis: 10 } ] 表示在x轴值为10 的坐标轴上画一条线。

这个功能一般用于标记出平均值等特殊的线。

现在用作非等间距坐标刻度的方案替代。

直接上代码

配置项：

series: [
  {
    name: 'Fake Data',
    type: 'line',
    smooth: true,
    data: [ [0, 10], [2, 20], [5, 30], [10, 40], [14, 45], [20, 50], [30, 57], [50, 60], [60, 65], [90, 70], [100, 75], ],
    markLine: {
      data: [2, 5, 10, 20, 50, 100].map(val => {
        return {
          xAxis: val,
        };
      }),
    },
  },
],

效果

线能画出来，距离成功就近了。

上面画出的原型有如下问题需要优化：

优化后的效果

下面是完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非等间距坐标</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts-en.common.min.js"></script> -->
<body>
    <div id="echarts" style="height: 300px;width:800px"></div>
</body>
<script>
    let myChart = window.echarts.init(document.getElementById('echarts'));

    let option = {
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisTick: { show: false }, // 隐藏刻度线
        splitLine: { show: false }, // 隐藏分割线
        axisLabel: { show: false }, // 隐藏刻度值
      },
      yAxis: [{ type: 'value' }],
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          smooth: true,
          data: [
            [0, 10],
            [2, 20],
            [5, 30],
            [10, 40],
            [20, 50],
            [50, 60],
            [90, 70],
            [100, 75],
          ],
          markLine: {
            symbol: false, // 取消箭头
            silent: true, // 取消鼠标hover事件
            label: {
              position: 'start', // 改变label位置
              formatter: obj => obj.value + 'd', // 格式化标签文本
            },
            lineStyle: { color: '#ddd', type: 'solid' },
            data: [2, 5, 10, 20, 50, 100].map(val => {
              return {
                xAxis: val,
              };
            }),
          },
          z: 10, // markLine应该有一个默认的z,但是不能修改，这里控制曲线z > markLine层级，保证markLine在曲线下方。
        },
      ],
    };
    myChart.setOption(option);
</script>
</html>

显示全文

全部栏目