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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
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
用Flash图形化数据(一)
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
js实现拖拽功能
2017/03/01 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
python类和继承用法实例
2015/07/07 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
婚前财产公证书
2014/04/10 职场文书
英文推荐信格式范文
2014/05/09 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
房租涨价通知
2015/04/23 职场文书
通知函的格式
2015/04/27 职场文书
长江七号观后感
2015/06/11 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA