vue2多个echarts图标自适应

在Vue2中，可以使用echarts来实现多个图表的自适应。以下是一个简单的示例：

1. 首先，安装echarts和vue-echarts插件：

npm install echarts vue-echarts

2. 在Vue组件中引入echarts和vue-echarts：

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

3. 在Vue组件中注册ECharts组件：

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      chartData: [
        // 填充你的图表数据
      ]
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.$refs.chart.resize()
    }
  }
}

4. 在Vue模板中使用ECharts组件来渲染图表：

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

5. 在Vue组件的计算属性中定义图表的配置选项：

computed: {
  chartOptions() {
    return {
      // 填充你的图表配置选项
      series: this.chartData
    }
  }
}

6. 最后，确保在窗口大小改变时调用`handleResize`方法来重新渲染图表：

mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.$refs.chart.resize()
  }
}

通过以上步骤，你可以在Vue2中实现多个echarts图表的自适应。你可以根据自己的需求，动态更新图表数据和配置选项。记得在窗口大小改变时重新渲染图表。