echarts 参考线实现数据项之间的差异值标注

这是一个项目中经常用到的参考线高阶用法，主要是实现 echarts 图形中数据项之间的差异值标注参考线

效果图

实现原理

通过 echarts 的官方文档 markLine.data 可知，参考线的配置可以通过二维数组 来配置参考线的起点和终点，同时结合 markLine.data.coord 可知通过配置 coord 可以控制参考线只显示在图形的某个局部区域（即在指定的两个维度值之间绘制参考线），结合以上分析，可以得出绘制两个数据项之间的差异值参考线的实现步骤：

1. 获取到需要对比差异值的数据项维度索引位置（dimIdx_start, dimIdx_end）和指标值（measureVal_start, measureVal_end）

2. 绘制起始和结束标注参考线

   [
       // 起始参考线
       [
         {
           symbolSize: 0,
           lineStyle: {
             color: 'red',
           },
           coord: [dimIdx_start, measureVal_start],
         },
         {
           symbolSize: 0,
           lineStyle: {
             color: 'red',
           },
           coord: [dimIdx_end, measureVal_start],
         },
       ],
       // 结束参考线
       [
         {
           symbolSize: 0,
           lineStyle: {
             color: 'red',
           },
           coord: [dimIdx_start, measureVal_end],
         },
         {
           symbolSize: 0,
           lineStyle: {
             color: 'red',
           },
           coord: [dimIdx_end, measureVal_end],
         },
       ],
     ]

3. 绘制差异值对比标注参考线

   [
     // ... 前面步骤绘制好的参考线
     // 差异值对比标注参考线
     [
       {
         symbolSize: 10,
         lineStyle: {
           color: "red",
         },
         // 找到数值较小的维度值，确保有足够的空白空间显示差异值标注
         coord: [
           measureVal_end > measureVal_start ? dimIdx_start : dimIdx_end,
           measureVal_start,
         ],
         symbol: "arrow",
         // 取绝对值
         name: Math.abs(measureVal_end - measureVal_start) + '',
         label: {
           position: "middle",
           color: "red",
         },
       },
       {
         symbolSize: 10,
         lineStyle: {
           color: "red",
         },
         coord: [
           measureVal_end > measureVal_start ? dimIdx_start : dimIdx_end,
           measureVal_end,
         ],
         symbol: "arrow",
       },
     ],
   ]

4. 如果是同个数据项内的不同 series 之间绘制参考线，此时需要借助 symbolOffset 来实现，否则参考线会以为内起点和终点位置一致导致无法绘制出来，参考代码如下

   [
       [
           {
             // 不同 series 之间同个数据项需要配置 symbolOffset 来实现局部绘制
             symbolSize: [1, 40],
             symbolOffset: [0, -20],
             lineStyle: {
               color: 'red'
             },
             coord: [dimIdx_start, measureVal_start],
             symbol: 'rect'
           },
           {
             symbolSize: 0,
             lineStyle: {
               color: 'red'
             },
             // 同个数据项，维度的索引起始和结束位置应该是相等的
             coord: [dimIdx_end, measureVal_start]
           }
         ]
   ]

完整 echarts 配置

在线示例环境可以看 demo

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      markLine: {
        // 同个 series 内不同数据项之间的差异值标注参考线
        data: [
          [
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [0, 120]
            },
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [1, 120]
            }
          ],
          [
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [0, 200]
            },
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [1, 200]
            }
          ],
          [
            {
              symbolSize: 10,
              lineStyle: {
                color: 'red'
              },
              coord: [0, 120],
              symbol: 'arrow',
              name: 200-120 + '',
              label: {
                position: 'middle',
                color: 'red'
              }
            },
            {
              symbolSize: 10,
              lineStyle: {
                color: 'red'
              },
              coord: [0, 200],
              symbol: 'arrow'
            }
          ]
        ],
        show: true
      },
      type: 'bar'
    },
    {
      data: [120, 180, 130, 80, 70, 110, 130],
      markLine: {
        // 同个数据项不同 series 之间的差异值数值标注
        data: [
          [
            {
              // 不同 series 之间同个数据项需要配置 symbolOffset 来实现局部绘制
              symbolSize: [1, 40],
              symbolOffset: [0, -20],
              lineStyle: {
                color: 'red'
              },
              coord: [2, 150],
              symbol: 'rect'
            },
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [2, 150]
            }
          ],
          [
            {
              symbolSize: [1, 40],
              symbolOffset: [0, -20],
              lineStyle: {
                color: 'red'
              },
              coord: [2, 130],
              symbol: 'rect'
            },
            {
              symbolSize: 0,
              lineStyle: {
                color: 'red'
              },
              coord: [2, 130]
            }
          ],
          [
            {
              symbolSize: 10,
              lineStyle: {
                color: 'red'
              },
              coord: [2, 150],
              symbol: 'arrow',
              name: '20',
              label: {
                color: 'red',
                position: 'middle'
              }
            },
            {
              symbolSize: 10,
              lineStyle: {
                color: 'red'
              },
              coord: [2, 130]
            }
          ],
        ],
        show: true
      },
      type: 'bar'
    }
  ]
};