这是一个项目中经常用到的参考线高阶用法，主要是实现 echarts 图形中数据项之间的差异值标注参考线
效果图
实现原理
通过 echarts 的官方文档 markLine.data 可知，参考线的配置可以通过二维数组 来配置参考线的起点和终点，同时结合 markLine.data.coord 可知通过配置 coord 可以控制参考线只显示在图形的某个局部区域（即在指定的两个维度值之间绘制参考线），结合以上分析，可以得出绘制两个数据项之间的差异值参考线的实现步骤：
-
获取到需要对比差异值的数据项维度索引位置（dimIdx_start, dimIdx_end）和指标值（measureVal_start, measureVal_end）
-
绘制起始和结束标注参考线
js[ // 起始参考线 [ { 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], }, ], ] -
绘制差异值对比标注参考线
js[ // ... 前面步骤绘制好的参考线 // 差异值对比标注参考线 [ { 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", }, ], ] -
如果是同个数据项内的不同 series 之间绘制参考线，此时需要借助 symbolOffset 来实现，否则参考线会以为内起点和终点位置一致导致无法绘制出来，参考代码如下
js[ [ { // 不同 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
js
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'
}
]
};