Echarts怎么实现多条折线可拖拽效果

爱秀

作者

这篇文章主要介绍Echarts怎么实现多条折线可拖拽效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

本文实例为大家分享了Echarts多条折线可拖拽的具体代码，供大家参考，具体内容如下

1、步骤：

1)、封装Echarts折线图方法manyLineChart(),提取出公共的部分； 2)、AJax获取后台数据传参至Echarts公共方法； 3)、模拟后台获取的json数据； 4)、给dayComment()方法值，开始执行。

2、效果：

3、代码：





ECharts多条折线可拖拽

/** *@todo加载echarts方法 *@url:异步请求路径 *@chartId:请求的echart的id *@xname:X轴名称 *@title:标题 */ functiondayComment(url,chartId,xname,title){ /*$.ajax({//Ajax请求你要展现的数据 url:url, type:'post', cache:false, dataType:'json', async:false,//改为同步 data:{},//查看方式 success:function(data){ manyLineChart(chartId,title,xname,data.legendData,data.xAxisData,data.yAxisData,data.fromTime,data.toTime); }, error:function(){ alert('服务器异常！') } });*/ vardata=getStaticJsonData(); manyLineChart(chartId,title,xname,data.legendData,data.xAxisData,data.yAxisData,data.fromTime,data.toTime); } /** *@todo多条线折线图可拖拽 *@paramchartId插件的div的ID *@paramtextname标题 *@paramxAxisNameX轴的名字 *@paramlegendData图示的数据 *@paramxAxisDataX轴的数据 *@paramyAxisDataY轴的数据[数组] *@paramfromTime默认开始节点 *@paramtoTime默认结束节点 **/ functionmanyLineChart(chartId,textname,xAxisName,legendData,xAxisData,yAxisData,fromTime,toTime){ varlineCount=legendData.length;//折线的条数 varseriesArray=[]; //循环得到Y轴的数据 for(varx=0;x

以上是“Echarts怎么实现多条折线可拖拽效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-05-30 14:10:02

echarts

分享空间
分享微博
手机扫一扫

海报

183

上一篇：Python3 A*寻路算法的示例分析下一篇：echarts如何实现折线图的拖拽效果

推荐阅读