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

自己笔记
 


 


 


 


 


 


 

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