vue echarts 实现折线图缩放

Vue Echarts是一个基于Vue.js框架封装的Echarts图表组件库，使用它可以更方便地在Vue.js项目中使用Echarts。

要实现折线图缩放，需要使用Echarts的dataZoom组件。具体步骤如下：

1. 在Vue组件中引入Echarts和Vue Echarts组件库：

import echarts from 'echarts'
import ECharts from 'vue-echarts/components/ECharts.vue'

2. 在Vue组件中注册Echarts组件：

export default {
  components: {
    'v-chart': ECharts
  },
  ...
}

3. 在Vue组件中配置Echarts图表：

<template>
  <v-chart :options="chartOptions" />
</template>

<script>
export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      chartOptions: {
        ...
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        ...
      }
    }
  }
}
</script>

在上面的代码中，通过在chartOptions中添加dataZoom配置，来启用缩放功能。其中，type属性可以设置为slider或inside，分别表示滑动条缩放和鼠标滚轮缩放。start和end属性表示缩放的起始和结束位置，可以根据需求进行配置。

通过以上步骤，就可以在Vue Echarts中实现折线图的缩放功能了。