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' }      }],    }    }  ]};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

自己笔记，仅供参考，有好的想法互相学习借鉴，共同进步思密达~