echarts的图表双击事件、单击某块、滚轮放大缩小

echarts的图表双击事件@dblclick

 <div  class="barPieBox" @dblclick="leftondbClick()"

                     style="width: 98%;height:250px ;"  >

                  <div :id=“leftBox1”

                       style="width:100%;height:100%;">

                  </div>               

</div>

echarts的图表单机某个柱子、线或者饼图的一个区域

//可以获取到X轴Y轴

 this[charts].on('click',function(params){

}

 柱形图或者折线图【带滑动条的echarts】点击某个柱子显示附件柱子，鼠标滚轮放大缩小，并动态显示柱形图上面的文字，缩小不显示

dataZoom: [

              {

                height: 8,

                realtime: true,

                show: true,

                start: (x.length > 17) ? 20 : 40, // 表示默认展示20%～80%这一段。

                 end: (x.length > 17) ? 50 : 70,

                          minValueSpan:0.6,//控制滚动到最大后还能一直滚动放大，导致缩小时体验感不好

              },

              {

                height: 8,

                realtime: true,

                type: 'inside',

                start: (x.length > 17) ? 20 : 40, // 表示默认展示20%～80%这一段。

                end: (x.length > 17) ? 50 : 70,

                 minValueSpan:0.6,//控制滚动到最大后还能一直滚动放大，导致缩小时体验感不好

              },

            ],          

      

   this[charts] = this.$echarts.init(document.getElementById(id));       

        this[charts].clear();

        this[charts].setOption(option)

        this[charts].resize()

//滚轮滚动，滚动到一定值，也就是柱子放大后，显示顶部文字，紧挨着    this[charts].resize()写

 this[charts].on('datazoom', () => {

          const datazoom = this[charts].getOption().dataZoom[0] // 用getOption获取改变的值

          // console.log(datazoom, 'datazoom');

          if (datazoom.end-datazoom.start<0.4) {

             let allSeries=[]

              y.forEach(item => {

                item.label.show=true

                allSeries.push(item)

              })

              y=allSeries

            }else{

              let allSeries=[]

              y.forEach(item => {

                item.label.show=false

                allSeries.push(item)

              })

              y=allSeries

            }

            //重新渲染图表

            this[charts].setOption({

              series: y

            })

        })

//点击显示附近，也就是单个柱子或者线的点击事件，紧挨着    this[charts].resize()写

  const zoomSize =2;          

  this[charts].on('click',function(params){     

//监听点击的那个

              _this[charts].dispatchAction({

                type: 'dataZoom',

                startValue:x[Math.max(params.dataIndex - zoomSize / 2, 0)],

                endValue: x[Math.min(params.dataIndex + zoomSize / 2, y.length - 1)],

              });             

          })