保钠

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

有时候,我们需要在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;

 

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

 

  

  

 

posted on 2021-12-22 11:42  保钠  阅读(6978)  评论(1编辑  收藏  举报