Echarts折线图隐藏markPoint只显示最大值和最小值的文本，且只在该两点显示symbol_echarts折线图markpoint

实现效果如下：

看起来非常简单，但实际实现起来……也确实简单，就是步骤多一点~

---

我们知道Echarts提供的markPoint标注最大值和最小值是会有一个水滴图案的：

首先要做的就是隐藏这个水滴图案。但如果将markPoint.symbol设为’none’，会将label文本一同去除。
所以思路应为将水滴图案的颜色置为透明。

            markPoint: {
   
              symbolSize: 20,
              itemStyle: {
   
                normal: {
   
                  color: 'rgba(0,0,0,0)'
                }
              },
              label: {
   
                show: true,
                color: '#fff'
              },
              data: [
                {
    type: 'max', name: 'Max' },
                {
    type: 'min', name: 'Min' }
              ]
            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

接下来是标记出最大值和最小值的两个小点：

这里最初想到的是showSymbol，但该属性为false时，则只有在 tooltip hover 的时候显示坐标点，而当为true时，就会在所有x轴的index都出现标记。

这里就要用到data的详细参数了：

当在symbol: ‘none’,去除所有标记的情况下，举例将data写成这种形式的数组：
data: [820, 932, 901, 934, 1290, { value: 1330, symbol: ‘circle’, symbolSize: 5 }, 1320]
折线图就会是以下效果：

而我们要求在折线数据的最大值和最小值处出现标记，那么就写个方法来封装一下数据数组吧：

    getDataSymbol(arr) {
   
      let maxNum = Math.max(...arr);  // 取得数据的最大值
      let minNum = Math.min(...arr);  // 取得数据的最小值
      let [maxIndex, minIndex] = [arr.indexOf(maxNum), arr.indexOf(minNum)];  // 取得数据第一次出现最大值与最小值时的索引
      let newArr = arr;
      newArr[maxIndex] = {
    value
1
2
3
4
5
6
7