好资源导航 » 文章资讯 » Echarts实现多条折线可拖拽效果

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

2023-08-04 07:32:04 74

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐