echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理)

前言

记录自己工作中的一点小心得，希望可以帮助有同样需求的朋友。

1.使用场景

之前我工作中有需要在图标中添加特殊标识的，我是费劲用散点图进行添加，十分麻烦。又比如有需要计算最大最小值然后特殊处理的，我都是先遍历算出，然后将对应替换对应值处理。
今天发现这个属性后，用了下，很好，很强大，能节省不少工作量，推荐使用。

使用很简单，在series对象中添加markPoint对象即可，属性可以设置官方提供的几种基本图形，也可以自己添加对应的图案使用，文本属性也可以设置，同其他一样。至于具体位置的使用在其的data中：(引用官方，懒)：

有下面几种方式指定标注的位置:
1.通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
2.用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 ‘min’, ‘max’, ‘average’。
3.直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时，优先级按上述的顺序。
简单的示例：
在这里插入图片描述
代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markPoint:{
      data: [{
        type: "max",
        symbol: "pin",
        symbolSize: 50,
        animation: true,
        label: {
          show: true,
          color: '#000'
        },
        itemStyle: { color: '#f00' }
      },
      {
        coord: [5, 100],
        symbol: "diamond",
        symbolSize: 50,
        value: '特殊标记',
        animation: true,
        label: {
          show: true,
          color: '#000'
        },
        itemStyle: { color:'#0f0' }
      },
      {
        x: '50%',
        yAxis:50,
        symbol: "roundRect",
        symbolSize: 50,
        value: '特殊标记2',
        animation: true,
        label: {
          show: true,
          color: '#000'
        },
        itemStyle: { color: '#00f' }
      },
      {
        type: "min",
        symbol: "pin",
        symbolSize: 50,
        animation: true,
        label: {
          show: true,
          color: '#000'
        },
        itemStyle: { color: '#faf' }
      }],

    }
    }
  ]
};