介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt;才能meta charset=皍tf-8"比;
& lt;才能title> ECharts多条折线可拖拽& lt;/title>
,& lt; script src=癶ttp://code.jquery.com/jquery-1.4.1.min.js"祝辞& lt;/script>
& lt; !——,才能引入,echarts.js ——比;
& lt;才能script src=癶ttp://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; !——,才能为ECharts准备一个具备大小(宽高)的Dom ——比;
& lt;才能div id=& # 39; consume_many_line& # 39;,祝辞,& lt;/div>
& lt;/body>
& lt;/html>
& lt; script 类型=拔谋?javascript"比;
,/* *
,* @todo 加载echarts方法
*大敌;异步请求路径
,* @chartId:请求的echart的id
,* @xname: X轴名称
,* @title:标题
,*/,function dayComment (url、chartId xname,标题),{
,/* $ . Ajax ({//Ajax请求你要展现的数据
url 才能:url、
type 才能:& # 39;文章# 39;
cache 才能:假的,
dataType 才能:& # 39;json # 39;
异步才能:假的,,//改为同步
data 才能:{,},,//查看方式
success 才能:功能(数据),{
manyLineChart才能(chartId,标题,xname , data.legendData,, data.xAxisData,, data.yAxisData,, data.fromTime,, data.toTime);
,,},
error 才能:函数(),{
警报才能(& # 39;服务器异常! & # 39;)
,,}
});*/,var data =, getStaticJsonData ();
,manyLineChart (chartId,标题,xname , data.legendData,, data.xAxisData,, data.yAxisData,, data.fromTime,, data.toTime);
,}
,/* *
,* @todo 多条线折线图可拖拽
,* @param chartId 插件的div的ID
,* @param textname 标题
,* @param xAxisName X轴的名字
,* @param legendData 图示的数据,
,* @param xAxisData X轴的数据
,* @param yAxisData , Y轴的数据(数组)
,* @param fromTime ,默认开始节点
,* @param toTime 默认结束节点
*,*/,function manyLineChart (chartId的不同之处是,textname, xAxisName,, legendData,, xAxisData,, yAxisData,, fromTime,, toTime ) {
,var lineCount =, legendData.length;,//折线的条数
,var seriesArray =, [];
,//循环得到Y轴的数据
,(var x=0, xEcharts怎么实现多条折线可拖拽效果
这篇文章主要介绍Echarts怎么实现多条折线可拖拽效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
本文实例为大家分享了Echarts多条折线可拖拽的具体代码,供大家参考,具体内容如下
1,步骤:
,,,, 1),封装Echarts折线图方法manyLineChart(),提取出公共的部分;
,,,2),AJax获取后台数据传参至Echarts公共方法;
,,,3),模拟后台获取的json数据;
,,,4),给dayComment()方法值,开始执行。
2,效果:
3代码:
