echarts折线图遇到的问题

本人博客全部迁至个人博客，柒情博客：http://www.ityw.club ，后续所有博客将在柒情博客上进行更新。

近来公司需要通过折线图展示商品的售罄率情况，看了下评价选择了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) {

}

 

后续问题遇到再补充。