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学习笔记(六) Date 日期类型
Jun 19 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP SQLite类
2009/05/07 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
10条php编程小技巧
2015/07/07 PHP
php xhprof使用实例详解
2019/04/15 PHP
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Python中list初始化方法示例
2016/09/18 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
浅析python的Lambda表达式
2019/02/27 Python
Django 返回json数据的实现示例
2020/03/05 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python pip 常用命令汇总
2020/10/19 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
人事部经理岗位职责
2014/03/07 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
英语复习计划
2015/01/19 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Redis 限流器
2022/05/15 Redis
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS