25 06 2019

近来公司需要通过折线图展示商品的售罄率情况,看了下评价选择了echarts,下面记录几个使用echarts遇到的问题

1.折线图堆叠问题

两个折线,第二个折线数据是0,在图上显示却和第一条折线类似,很明显这不是我想要的,最后查证发现需要把series中的stack属性去掉或者设置不同的值,如图


2.折线图纵坐标名称和标题与图例遮挡问题,如图 

 

查阅文档得知echarts的图例需要换行的话只需要插入一个空字符("")插件就会自动识别换号,我最终的解决方案是每行显示五个图列,由于数据是后端传过来的,于是我每隔五个数据就插入一个空字符串得以解决 

3.图例行数太多与折线图重叠,如图

 

查询得知grid有四个参数left、right、top、bottom分别是折线图的左右上下边距,想可以后端根据选择的图例数量动态控制top属性即可,于是后端传过来的json多加了一个top属性即解决,经过个人多次测试得出一列可设置为15%,加一列加5%,以此类推,此比例适用于我的页面经供参考。

最终放一张成功的图

-------------------------------------------------------------------2019-01-17-------------------------------------------------------------------------------------

这两天看日志又发现了一个问题,当坐标轴上面有多条折线的时候,点击某个节点,会触发多次点击事件从而会多次给后端发相同的请求,如图


经过网上查阅资料,加如下代码,每次点击前将点击的次数清空,即可解决问题 

// 使用刚指定的配置项和数据显示图表。
myChart.clear();
myChart.setOption(option);
//防止重复触发点击事件
if(myChart._$handlers.click){
myChart._$handlers.click.length = 0;
}
myChart.on('click', function (params) {

}


 如果文章对你有用请评论或点个赞,顶上去让更多人看到,少踩坑,谢谢(疯狂暗示)

延伸阅读
  1. 临时表的运用
  2. 通过QQ号获取信息
发表评论