使用Echart怎么實(shí)現(xiàn)折線圖手柄觸發(fā)事件

今天就跟大家聊聊有關(guān)使用Echart怎么實(shí)現(xiàn)折線圖手柄觸發(fā)事件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

10年積累的網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有牙克石免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1 環(huán)境：

vue-cli（2.0）+ vue-echarts 

2 場景：

需求，需要拖動手柄，等松開手柄時，要根據(jù)手柄所在的位置(獲取手柄在的x軸信息)，重新發(fā)送請求，來渲染數(shù)據(jù)。

3圖：

4遇到的bug：

4.1 手柄上的label信息，有時會刷新不出來。即上圖中的2016-10-07消失。

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

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

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

拖動手柄時，會實(shí)時觸發(fā)formater,

解決第一個bug ，label有時會消失，因?yàn)槲乙院蟮拇a會用到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('實(shí)時獲取的X軸的事件'+_this.date)
 return value;
},

,axisPoint對象的其他數(shù)據(jù)寫在了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í)時獲取的X軸的事件'+_this.date)
     return value;
    },
    backgroundColor: '#004E52'
   },
   handle: {
    show: true,
    color: '#004E52'
   }
   }
  },

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

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

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

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

看完上述內(nèi)容，你們對使用Echart怎么實(shí)現(xiàn)折線圖手柄觸發(fā)事件有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站標(biāo)題：使用Echart怎么實(shí)現(xiàn)折線圖手柄觸發(fā)事件
文章URL：http://muchs.cn/article16/ghegdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、ChatGPT、全網(wǎng)營銷推廣、建站公司、小程序開發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)