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>

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

Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue实现五子棋游戏
May 28 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python多进程机制实例详解
2015/07/02 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python使用多进程的实例详解
2018/09/19 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
护士思想汇报
2014/01/12 职场文书
担保书格式及范文
2014/04/01 职场文书
企业文明单位申报材料
2014/05/16 职场文书
个人担保书范文
2014/05/20 职场文书
庐山导游词
2015/02/03 职场文书