Echart折线图手柄触发事件示例详解


Posted in Javascript onDecember 16, 2018

前言

这是我准备在这个项目中使用的图形库,这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。

下面话不多说了,来一起看看详细的介绍吧

1 环境:

vue-cli(2.0)+ vue-echarts (git地址:https://github.com/ecomfe/vue-echarts(本地下载))

2 场景:

最近项目用echarts来展示图标,其中有一个需求,需要拖动手柄,等松开手柄时,要根据手柄所在的位置(获取手柄在的x轴信息),重新发送请求,来渲染数据。

echarts的手柄实例地址:http://echarts.baidu.com/examples/editor.html?c=line-tooltip-touch

3图:

Echart折线图手柄触发事件示例详解

4遇到的bug:

4.1 手柄上的label信息,有时会刷新不出来。即上图中的2016-10-07消失。

4.2 echarts的点击事件对折线图并不友好,必须点在折线图的点坐标上才会触发事件。so,要实现点击图中任意位置来即可实现触发自己的事件。

4.3 echarts提供了可以拖动的手柄,但是并没有松开手柄后触发的事,这个没有满足我们产品的需求。当然有可能是我没有找到,若有请告知,谢谢。

5解决以上的bug:

页面的展示如下:

<template>
 <div>
 <div id='line' @touchend='touchs' @mouseup='touchs'>
  <v-chart auto-resize class='zhexian' :options='lineOption' :initOptions='initOptions' ref='line' />
 </div>
 </div>
</template>
<script>
 //初始化折线的数据
 import lineoption from '@/assets/js/handleline.js'
 export default{
  data(){
   return{
    lineOption:lineoption,
    initOptions:{
     renderer: 'svg' || 'canvas'
    },
    date:'',//发送Ajax时所需的参数
    reFlag:'',//避免重复发送请求时的中间变量
   }
  }, 
  }
</script>

拖动手柄时,会实时触发formater,

解决第一个bug ,label有时会消失,因为我以后的代码会用到formatter,第一次要用formater ,我是这样写的,

this.lineOption.xAxis.axisPoint.label.formatter=function(param){ 
   //param是X轴的信息
 let value = _this.$echart.format.formatTime('yyyy-MM-dd', params.value);
 _this.date =value;
 console.log('实时获取的X轴的事件'+_this.date)
 return value;
},

,axisPoint对象的其他数据写在了handleline.js中,解决方案就是把axisPoint的其他数据也重新setOption了,

mounted(){
   //
   let _this = this;
   this.lineOption.xAxis.axisPointer={
   value: '2016-10-7',
   snap: true,
   lineStyle: {
    color: '#004E52',
    opacity: 0.5,
    width: 2
   },
   label: {
    show: true,
    formatter: function (params) {
     let value = _this.$echart.format.formatTime('yyyy-MM-dd', params.value);
     _this.date =value;
     console.log('实时获取的X轴的事件'+_this.date)
     return value;
    },
    backgroundColor: '#004E52'
   },
   handle: {
    show: true,
    color: '#004E52'
   }
   }
  },

解决第三个bug,结合了formatter 和 vue的touchend事件,单独的formatter并没有用,因为手指离开时,formatter的param数据会获取多个,也有可能会是多个重复的数据。效果并不好。so结合了touchend事件,手指离开时获取最终的date.

methods:{
   touchs(){
    //手指离开手柄事件,因为手柄滑动时,就会触发formatter,这时,this.date 就会发生改变。当你手指触发其他的地方时
    //并不会改变this.date的值,so。为了避免手指离开时重复发送请求,需要一个中间变量。只有两个值不相等才会去做自己想做的事。
    if (this.reFlag == this.date) {
     return
     }
    this.reFlag = this.date
    //重新发送请求,渲染数据,这时已经或得了X轴的时间。
    console.log(this.date)
    // this.getPieData()
   },
  }

解决第二个bug ,这是从网上找到的。实现点击折线图的任意地方获取x轴的信息,发送请求。同时,要让lineOption中的tooltip:{triggerOn:'click'} ,否则点击无效。

sendTime() {
    //写在mounted中调用
     var chart = this.$echart.init(this.$refs.line.$el)
     chart.getZr().on('click', params => {
     var pointInPixel = [params.offsetX, params.offsetY]
     if (chart.containPixel('grid', pointInPixel)) {
      let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
       params.offsetX,
       params.offsetY
     ])[0];
     let a =this.$echart.format.formatTime('yyyy-MM-dd', xIndex);
     /*事件处理代码书写位置*/
     // xIndex是个重要信息,用的时候最好打印看下具体的内容再用
     console.log(xIndex);
    // this.date = this.linedata[xIndex + 1][0];
    // 手指点击后,让这两个值相等,避免触发touchend事件,
    this.reFlag = this.date=a;
    //重新发送请求
    //this.getPieData()
  }
  })
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
antd Upload 文件上传的示例代码
Dec 14 #Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 #Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 #Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 #Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python函数装饰器原理与用法详解
2019/08/16 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
keras导入weights方式
2020/06/12 Python
python实现人工蜂群算法
2020/09/18 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
商业街策划方案
2014/05/31 职场文书
上党课的心得体会
2014/09/02 职场文书
合同补充协议书
2016/03/24 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA