vue tab切换,解决echartst图表宽度只有100px的问题

如果在 Vue 中使用 tab 切换来解决 ECharts 图表宽度只有 100px 的问题，你可以在 tab 切换的回调函数中重新渲染 ECharts 图表，并设置正确的宽度。

首先，在 Vue 组件中引入 ECharts 和 tab 组件，然后在模板中设置一个包含 tab 切换的容器和一个用于显示 ECharts 图表的容器，例如：

<template>
  <div>
    <div class="tabs">
      <button @click="changeTab('tab1')">Tab 1</button>
      <button @click="changeTab('tab2')">Tab 2</button>
      <button @click="changeTab('tab3')">Tab 3</button>
    </div>

    <div class="chart-container">
      <div v-if="currentTab === 'tab1'" ref="chart1"></div>
      <div v-if="currentTab === 'tab2'" ref="chart2"></div>
      <div v-if="currentTab === 'tab3'" ref="chart3"></div>
    </div>
  </div>
</template>

接下来，在 Vue 组件的 JavaScript 部分，你可以使用 ECharts 的实例对象进行图表的初始化和渲染。在 tab 切换的回调函数中，你可以重新渲染图表，并设置正确的宽度。例如：

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      currentTab: 'tab1',
      chart1: null,
      chart2: null,
      chart3: null
    };
  },
  mounted() {
    this.chart1 = echarts.init(this.$refs.chart1);
    this.chart2 = echarts.init(this.$refs.chart2);
    this.chart3 = echarts.init(this.$refs.chart3);

    // 初始化图表配置...
    // this.chart1.setOption({...});
    // this.chart2.setOption({...});
    // this.chart3.setOption({...});
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;

      // 在切换 tab 时重新渲染图表，并设置宽度
      if (tab === 'tab1') {
        this.chart1.resize();
      } else if (tab === 'tab2') {
        this.chart2.resize();
      } else if (tab === 'tab3') {
        this.chart3.resize();
      }
    }
  }
};
</script>

通过使用 ref 属性和 ECharts 的 resize() 方法，你可以在切换 tab 时重新渲染图表并调整宽度。确保在 mounted 钩子函数中初始化图表实例，并在切换 tab 时调用对应图表的 resize() 方法。

这样，每次切换 tab 时，ECharts 图表都会重新渲染，并且会根据容器的宽度自动调整图表的宽度。

希望这能解决你的问题！如果还有其他疑问，请随时提问。