SOURCE

    // 全局注册组件（也可以使用局部注册）
    Vue.component("v-chart", VueECharts);

    new Vue({
      el: '#app',
      components: {
        // VChart: VueECharts
      },
      data() {
        return {
          polar: {
            dataZoom: [
              {
                type: 'inside',
                startValue: 0,
                endValue: 10
              },
              {
                startValue: 0,
                endValue: 10
              }
            ],
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }
            ]
          }
        }
      },

      created(){
          
      },
      mounted(){
          this.setData()
      },
      methods:{
        setData() {
            setInterval(()=>{
                this.polar.series[0].data.unshift(parseInt(Math.random() * 1000))
                this.polar.xAxis.data.unshift(parseInt(Math.random() * 10000))

            }, 2000)
        },
        handleClick(e) {
          const {name, value} = e
          // alert(`name: ${name}, value: ${value}`)
          console.log(`name: ${name}, value: ${value}`)
        },
        handledatazoom(e) {
          const {start, end} = e.batch ? e.batch[0] : e
          console.log(`start: ${start}, end: ${end}`)

            this.polar.dataZoom[0].start = start
            this.polar.dataZoom[0].end = end

            this.polar.dataZoom[1].start = start
            this.polar.dataZoom[1].end = end
        }
      }
    })

<div id="app">
    <v-chart 
    class="chart-box" 
    :options="polar"
     @click="handleClick" 
     @datazoom="handledatazoom"/>
</div>