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

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'}}],}}]};

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