<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ā)送請求時(shí)的中間變量
   }
  }, 
  }
</script>

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;
},

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'
   }
   }
  },

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

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是個(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ā)送請求
    //this.getPieData()
  }
  })
 },