快捷導(dǎo)航

Echart折線圖手柄觸發(fā)事件示例詳解

更新時(shí)間：2018年12月16日 11:13:01 作者：夢(mèng)蝶莊周

這篇文章主要給大家介紹了關(guān)于Echart折線圖手柄觸發(fā)事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

這是我準(zhǔn)備在這個(gè)項(xiàng)目中使用的圖形庫(kù)，這也是一款基于HTML5的圖形庫(kù)。圖形的創(chuàng)建也比較簡(jiǎn)單，直接引用Javascript即可。使用這個(gè)庫(kù)的原因主要有三點(diǎn)，一個(gè)是因?yàn)檫@個(gè)庫(kù)是百度的項(xiàng)目，而且一直有更新，目前最新的是EChart 3；第二個(gè)是這個(gè)庫(kù)的項(xiàng)目文檔比較詳細(xì)，每個(gè)點(diǎn)都說(shuō)明的比較清楚，而且是中文的，理解比較容易；第三點(diǎn)是這個(gè)庫(kù)支持的圖形很豐富，并且可以直接切換圖形，使用起來(lái)很方便。

下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

1 環(huán)境：

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

2 場(chǎng)景：

最近項(xiàng)目用echarts來(lái)展示圖標(biāo)，其中有一個(gè)需求，需要拖動(dòng)手柄，等松開(kāi)手柄時(shí)，要根據(jù)手柄所在的位置(獲取手柄在的x軸信息)，重新發(fā)送請(qǐng)求，來(lái)渲染數(shù)據(jù)。

echarts的手柄實(shí)例地址：http://echarts.baidu.com/examples/editor.html?c=line-tooltip-touch

3圖：

4遇到的bug：

4.1 手柄上的label信息，有時(shí)會(huì)刷新不出來(lái)。即上圖中的2016-10-07消失。

4.2 echarts的點(diǎn)擊事件對(duì)折線圖并不友好，必須點(diǎn)在折線圖的點(diǎn)坐標(biāo)上才會(huì)觸發(fā)事件。so,要實(shí)現(xiàn)點(diǎn)擊圖中任意位置來(lái)即可實(shí)現(xiàn)觸發(fā)自己的事件。

4.3 echarts提供了可以拖動(dòng)的手柄，但是并沒(méi)有松開(kāi)手柄后觸發(fā)的事，這個(gè)沒(méi)有滿足我們產(chǎn)品的需求。當(dāng)然有可能是我沒(méi)有找到，若有請(qǐng)告知，謝謝。

5解決以上的bug:

頁(yè)面的展示如下：

<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>
 //初始化折線的數(shù)據(jù)
 import lineoption from '@/assets/js/handleline.js'
 export default{
  data(){
   return{
    lineOption:lineoption,
    initOptions:{
     renderer: 'svg' || 'canvas'
    },
    date:'',//發(fā)送Ajax時(shí)所需的參數(shù)
    reFlag:'',//避免重復(fù)發(fā)送請(qǐng)求時(shí)的中間變量
   }
  }, 
  }
</script>

拖動(dòng)手柄時(shí)，會(huì)實(shí)時(shí)觸發(fā)formater,

解決第一個(gè)bug ，label有時(shí)會(huì)消失，因?yàn)槲乙院蟮拇a會(huì)用到formatter,第一次要用formater ,我是這樣寫(xiě)的，

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('實(shí)時(shí)獲取的X軸的事件'+_this.date)
 return value;
},

,axisPoint對(duì)象的其他數(shù)據(jù)寫(xiě)在了handleline.js中，解決方案就是把a(bǔ)xisPoint的其他數(shù)據(jù)也重新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('實(shí)時(shí)獲取的X軸的事件'+_this.date)
     return value;
    },
    backgroundColor: '#004E52'
   },
   handle: {
    show: true,
    color: '#004E52'
   }
   }
  },

解決第三個(gè)bug，結(jié)合了formatter 和 vue的touchend事件，單獨(dú)的formatter并沒(méi)有用，因?yàn)槭种鸽x開(kāi)時(shí)，formatter的param數(shù)據(jù)會(huì)獲取多個(gè)，也有可能會(huì)是多個(gè)重復(fù)的數(shù)據(jù)。效果并不好。so結(jié)合了touchend事件，手指離開(kāi)時(shí)獲取最終的date.

methods:{
   touchs(){
    //手指離開(kāi)手柄事件，因?yàn)槭直瑒?dòng)時(shí)，就會(huì)觸發(fā)formatter，這時(shí)，this.date 就會(huì)發(fā)生改變。當(dāng)你手指觸發(fā)其他的地方時(shí)
    //并不會(huì)改變this.date的值，so。為了避免手指離開(kāi)時(shí)重復(fù)發(fā)送請(qǐng)求，需要一個(gè)中間變量。只有兩個(gè)值不相等才會(huì)去做自己想做的事。
    if (this.reFlag == this.date) {
     return
     }
    this.reFlag = this.date
    //重新發(fā)送請(qǐng)求,渲染數(shù)據(jù)，這時(shí)已經(jīng)或得了X軸的時(shí)間。
    console.log(this.date)
    // this.getPieData()
   },
  }

解決第二個(gè)bug ,這是從網(wǎng)上找到的。實(shí)現(xiàn)點(diǎn)擊折線圖的任意地方獲取x軸的信息，發(fā)送請(qǐng)求。同時(shí)，要讓lineOption中的tooltip:{triggerOn:'click'} ,否則點(diǎn)擊無(wú)效。

sendTime() {
    //寫(xiě)在mounted中調(diào)用
     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);
     /*事件處理代碼書(shū)寫(xiě)位置*/
     // xIndex是個(gè)重要信息，用的時(shí)候最好打印看下具體的內(nèi)容再用
     console.log(xIndex);
    // this.date = this.linedata[xIndex + 1][0];
    // 手指點(diǎn)擊后，讓這兩個(gè)值相等，避免觸發(fā)touchend事件，
    this.reFlag = this.date=a;
    //重新發(fā)送請(qǐng)求
    //this.getPieData()
  }
  })
 },

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: