Echarts之曲线markline使用,图表画框及标注


有时候,我们需要在echarts生成的图表上画出指定区域并标注。

图例:

 

 主要使用到的属性为markLine,主要思想是两点连线集合,填充markline的data属性。

上菜:

  var coordEntity1 = {};var coordEntity2 = {}; //定义markline的属性对象

  每个coordEntity代表一个坐标点,并且可对坐标点命名和位置定义,

  如:coordEntity1.name = ('花田错'); coordEntity1.lable = 'end'; //start,middle,end位置

  并且coordEntity可对颜色进行处理,属性lineStyle,

  如:coordEntity1.lineStyle = { lineStyle.color = "red" };

  接下来可以对coordEntity的coord属性赋值,coord属性即为坐标点的数据

  如:coordEntity1.coord = [X坐标值,Y坐标值];

  定义标线数组allData,一条线需要起始点坐标和终点坐标,coordEntity填充allData

  如:allData.push([coordEntity1,coordEntity2]);

  最后填充markline的data

  如:option.series[0].markLine.data = allData;

 

  评价只许说一个字:完美!!

 

  

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM