首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 19, 2019

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

1、步骤：

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

2、效果：

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

3、代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts多条折线可拖拽</title>
 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  <!-- 引入 echarts.js -->
  <script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id='consume_many_line' style="width:600px;height:400px;margin-left:20px;"> </div>
</body>
</html>
<script type="text/javascript">
  /**
 * @todo 加载echarts方法
 * @url:异步请求路径
 * @chartId:请求的echart的id
 * @xname:X轴名称
 * @title:标题
 */
 function dayComment(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('服务器异常！')
  }
 });*/
 var data = getStaticJsonData();
 manyLineChart(chartId, title, 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轴的数据
 for(var x=0; x<lineCount; x++){
  seriesArray[x] = {name:legendData[x],type:'line',data:yAxisData[x]};
 }
 
 var myChart = echarts.init(document.getElementById( chartId ));
 var option = {
  //color:['red', 'black', 'green', 'blue', 'orange'],
  color:["#ff7f50","#87cefa","#da70d6","#32cd32","#6495ed","#ff69b4","#ba55d3","#cd5c5c","#ffa500","#40e0d0",
      "#1e90ff","#ff6347","#7b68ee", "#00fa9a","#ffd700","#6699FF","#ff6666","#3cb371","#b8860b","#30e0e0"], //[数组]颜色，按照设置的循环
  title: {
      text: textname,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show : true,
      feature : {
      magicType : {show: true, type: ['line', 'bar']},
      dataView : {show: true},
      }
    },
    legend: {
      left: 'left',
      data: legendData,
      top:30,
    },
    calculable : true,
    dataZoom : {
      show : true,
      realtime : true,
      startValue: fromTime, //拖拽条开始时间
      endValue: toTime,  //拖拽条结束时间
    },
    xAxis: {
      type: 'category',
      name: xAxisName,
      splitLine: {show: false},
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: seriesArray
  };
 
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption( option );
 };
 
 //模拟AJax请求获取返回的json数据
 function getStaticJsonData(){
 var data = '{"legendData":["A\\u6d88\\u8d39","B\\u6d88\\u8d39","C\\u6d88\\u8d39","D\\u6d88\\u8d39","E\\u6d88\\u8d39"],"xAxisData":["20180417","20180418","20180419","20180420","20180421","20180422","20180423","20180424","20180425","20180426","20180427","20180428","20180429","20180430","20180501","20180502","20180503","20180504","20180505","20180506","20180507","20180508","20180509","20180510","20180511","20180512","20180513","20180514","20180515","20180516","20180517","20180518","20180519","20180520","20180521","20180522","20180523","20180524","20180525","20180526","20180527","20180528","20180529","20180530","20180531","20180601","20180602","20180603","20180604","20180605","20180606"],"yAxisData":[["8786.00","8676.00","9112.00","8066.00","5664.00","3728.00","8708.00","8658.00","85442.00","8028.00","7786.00","7358.00","3654.00","3274.00","3052.00","7524.00","3466.00","8796.00","6136.00","3568.00","8202.00","8222.00","8198.00","8510.00","7728.00","5324.00","3922.00","8846.00","8210.00","8646.00","7986.00","8018.00","6142.00","3444.00","79578.00","7806.00","7552.00","7344.00","7800.00","4626.00","3724.00","7946.00","8034.00","7320.00","7830.00","1234.00","2345.00","6789.00","7890.00","1314.00","5201.00"],["2261.91","1846.33","2393.24","1820.55","377.57","224.30","2326.34","1900.70","2709.85","2442.71","2569.75","2677.25","130.00","68.00","36.00","1070.98","1863.58","1607.55","521.36","296.18","1715.53","2037.64","2444.29","2505.96","2790.07","864.44","558.53","2737.92","2543.09","2674.00","2951.14","3406.87","892.22","633.30","2124.54","2111.44","1825.25","1633.61","1479.48","789.10","327.23","2511.37","2009.50","1836.02","2661.11","2696.25","714.04","376.55","2082.04","1479.29","3385.61"],["2561.00","2691.00","2131.00","2583.00","1750.00","1001.00","2612.00","2356.00","2534.00","2771.00","2025.00","2190.00","1037.00","954.00","801.00","2386.00","2492.00","2934.00","1430.00","897.00","2507.00","2548.00","2363.00","2760.00","2476.00","1644.00","1030.00","2861.00","2853.00","2999.00","2269.00","2060.00","2201.00","987.00","2731.00","2723.00","2660.00","2762.00","2445.00","1319.00","9552.00","275.00","2846.00","2626.00","2598.00","2750.00","1968.00","1001.00","2390.00","2574.00","3097.00"],["3270.00","4266.00","6950.00","3264.00","3898.00","770.00","2856.00","4744.00","4876.00","4814.00","4028.00","3038.00","1024.00","1108.00","692.00","30136.00","3016.00","3892.00","2392.00","920.00","4042.00","3492.00","3466.00","5206.00","7908.00","3322.00","908.00","4184.00","4696.00","3654.00","4416.00","4564.00","4580.00","808.00","5826.00","4554.00","4588.00","4408.00","4200.00","2514.00","906.00","3338.00","3706.00","4320.00","4060.00","4008.00","2464.00","754.00","3912.00","5032.00","3834.00"],["5557.91","4970.56","4389.10","4966.10","4452.77","711.80","4139.45","4581.69","3089.34","4306.57","4909.15","1838.72","281.56","472.67","174.98","5130.81","7155.56","4844.09","1768.51","497.72","2902.13","3865.80","3651.81","5248.23","4780.90","2362.47","250.92","5030.40","3443.63","5095.00","4278.02","2877.35","2944.94","637.02","4507.43","3942.91","3507.04","3611.03","5200.38","2449.68","653.43","3543.92","4231.95","4644.98","4270.29","3314.63","2303.49","679.44","1173.68","6433.01","5827.75"]],"fromTime":"20180531","toTime":"20180606"}';
 data = eval('(' + data + ')');
 return data;
 }
 
 dayComment( 'Ajax请求路径', 'consume_many_line', '日期', '用户消费'); //执行
</script>

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

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

- Author -

一包伤心的辣条

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
JavaScript函数详解
Nov 17 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
json 带斜杠时如何解析的实现
Aug 12 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
js判断一个对象是数组（函数）的方法实例
Dec 19 #Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
JS数据类型STRING使用实例解析
Dec 18 #Javascript
JS精确判断数据类型代码实例
Dec 18 #Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 #Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 #Javascript
天问一号(1) 人造肉(1) 太空(1) 对撞机(1) DNS服务器(2) 粒子对撞机(1) 夸克(1) 界面设计(1) 国际空间站(1) FTP服务器(1)
You might like
php语言的7种基本的排序方法
2020/12/28 PHP
php实用代码片段整理
2016/11/12 PHP
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
2015/07/27 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
AngularJS 单元测试（二）详解
2016/09/21 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[36:52]DOTA2真视界：基辅特锦赛总决赛
2017/05/21 DOTA
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python中的with...as用法介绍
2015/05/28 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
transform python环境快速配置方法
2018/09/27 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Pygame的程序开始示例代码
2020/05/07 Python
深入了解Python enumerate和zip
2020/07/16 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
汽车机修工岗位职责
2014/03/06 职场文书
公务员个人考察材料
2014/12/23 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
看古人们是如何赞美老师的？
2019/07/08 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL