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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
Vue动态组件实例解析
Aug 20 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
生日宴会答谢词
2014/01/09 职场文书
护士思想汇报
2014/01/12 职场文书
化工操作工岗位职责
2014/04/29 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
酒店前台辞职书
2015/02/26 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers