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 相关文章推荐
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
js实现拖拽效果
Feb 12 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
小程序实现五星点评效果
Nov 03 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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下实现折线图效果的代码
2007/04/28 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python使用配置文件过程详解
2019/12/28 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
什么是方法的重载
2013/06/24 面试题
校园演讲稿汇总
2014/05/21 职场文书
企业文化口号
2014/06/12 职场文书
军训口号
2014/06/13 职场文书
美术学专业求职信
2014/07/23 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python