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


Posted in Javascript onDecember 19, 2019

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

1、步骤:

    1)、封装Echarts折线图方法coinConsumeChart(),提取出公共的部分;
    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_line' style="width:600px;height:400px;margin-left:20px;"> </div>
</body>
</html>
<script type="text/javascript">
 /**
 * @todo 加载echarts方法
 * @url:异步请求路径
 * @chartId:请求的echart的id
 * @titleText:标题名
 * @detailHref:跳转路径
 * @name:图例名
 */
 function dayComment(url,chartId,titleText,detailHref, name) {
 /*$.ajax({//Ajax请求你要展现的数据
 url :url,
 type : 'post',
 cache : false,
 dataType : 'json',
 async:false, //改为同步
 data : { }, //查看方式
 success : function(data) {
 detailHref = 'http://www.baidu.com';
 coinConsumeChart( chartId, titleText, detailHref, name, data.date, data.pv, data.fromTime, data.toTime);
 },
 error : function() {
 alert('服务器异常!')
 }
 });*/
 //假设已经获取到json数据
 var data = getStaticJsonData();
 coinConsumeChart( chartId, titleText, detailHref, name, data.date, data.pv, data.fromTime, data.toTime);
 }
 
 /**
 * @todo 可拖拽的折线图
 * @param chartId 插件的div的ID
 * @param titleText 标题名
 * @param sublink 副标题超链接的路径
 * @param name  图例名
 * @param xAxisData X轴数据
 * @param seriesData Y轴数据
 * @param fromTime 默认开始节点
 * @param toTime 默认结束节点
 * */
 function coinConsumeChart( chartId , titleText, detailUrl, name, xAxisData, seriesData , fromTime, toTime){
 // 指定图表的配置项和数据
 var myChart = echarts.init(document.getElementById( chartId ));
 var option = {
 title : {
  text: titleText,
  x:'center', //主标题居中
  subtext:'详情',
  sublink: detailUrl,//副标题超链接
  subtarget:'blank',//副标题超链接打开方式
  subtextStyle:{
  color:'#2299EE',
  fontSize: 15,
  }
  },
  
 color: ['#3398DB'],
 tooltip : {
   trigger: 'axis'
  },
  legend: {
   data:[name],
   top:30,
   left:55, //图示显示在左边
  },
  toolbox: {
   show : true,
   feature : {
    //mark : {show: true},
    //dataZoom : {show: true},
    //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
   magicType : {show: true, type: ['line', 'bar']},
   dataView : {show: true},
    //restore : {show: true},
    //saveAsImage : {show: true}
   }
  },
  calculable : true,
  dataZoom : {
   show : true,
   realtime : true,
   // start : 20,
   // end : 80 //百分比
   startValue: fromTime, //拖拽条开始时间
   endValue: toTime //拖拽条结束时间
  },
  xAxis : [
   {
    type : 'category',
    boundaryGap : false,
    data : xAxisData
   }
  ],
  yAxis : [
   {
    type : 'value'
   }
  ],
  series : [
   {
    name: name,
    type:'line',
    data: seriesData,
   },
  ]
 };
      
 
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption( option );
 }
 
 //模拟AJax请求获取返回的json数据
 function getStaticJsonData(){
 var data = '{"date":["20180726","20180727","20180728","20180729","20180730","20180731","20180801","20180802","20180803","20180804","20180805","20180806","20180807","20180808","20180809","20180810","20180811","20180812","20180813","20180814"],"pv":[100,10,20,30,60,800,700,300,1000,100,100,360,900,180,120,150,600,140,1200,800],"fromTime":"20180808","toTime":"20180814"}';
 data = eval('(' + data + ')');
 return data;
 }
 
 dayComment( 'Ajax请求路径', 'consume_line', '用户消费','http://www.baidu.com', 'A消费'); //执行
</script>

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

Javascript 相关文章推荐
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JQuery球队选择实例
May 18 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
Echarts实现多条折线可拖拽效果
Dec 19 #Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 #Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
JS数据类型STRING使用实例解析
Dec 18 #Javascript
JS精确判断数据类型代码实例
Dec 18 #Javascript
You might like
php反射应用示例
2014/02/25 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
js图片上传的封装代码
2017/08/01 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python编程开发之日期操作实例分析
2015/11/13 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
《藏戏》教学反思
2014/02/11 职场文书
小学生毕业评语
2014/12/26 职场文书
休假证明书
2015/06/24 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python