水平辅助线，自由标注，echarts折线图markline的使用新花样

前端

2023-12-18 07:43:18

技术】无独有偶，echarts 折线图 markline 还可以这样玩？

1. 概述

在数据量庞大的折叠折线图中，给其中一条添加两条水平的标线，标线的Y轴用户自定义，起点标记的图形用设计好的两个png小图片。

2. 方案

方案一：使用图例

也就是重新画一条折线图，折线图的x轴对齐到原折线图的x轴，y轴自行设定。

优点：

实现简单

缺点：

辅助线和原折线图不在同一层级，存在重叠问题。
无法自定义标记形状。

方案二：使用markline

markline 是echarts中用于标记折线图上特定数据点或区域的图形元素。它支持多种类型的标记，包括水平线、竖直线、圆形、矩形等。

优点：

辅助线和原折线图在同一层级，不存在重叠问题。
支持自定义标记形状。

3. 实现

3.1 引入echarts库

<script src="echarts.min.js"></script>

3.2 创建echarts实例

var myChart = echarts.init(document.getElementById('myChart'));

3.3 准备数据

var data = [
  {
    name: '数据1',
    data: [10, 20, 30, 40, 50]
  }
];

3.4 配置markline

option = {
  series: [
    {
      type: 'line',
      data: data[0].data,
      markLine: {
        data: [
          {
            name: '辅助线1',
            yAxis: 20,
            symbol: 'image://image/mark_start.png',
            symbolSize: [15, 15]
          },
          {
            name: '辅助线2',
            yAxis: 30,
            symbol: 'image://image/mark_start.png',
            symbolSize: [15, 15]
          }
        ]
      }
    }
  ]
};