elementui tabs组件放在echarts上不显示

在使用 ElementUI 的 Tabs 组件时，需要确保 Tabs 组件和 Echarts 图表组件的 DOM 结构不会相互影响。因此，可以将 Tabs 组件放在 Echarts 图表组件的外层容器中，以避免样式冲突。

以下是一个示例代码，展示如何在 Echarts 图表组件中使用 ElementUI 的 Tabs 组件：

<template>
  <div class="echarts-wrapper">
    <div class="echarts-chart" ref="echartsChart"></div>
    <div class="tab-wrapper">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
        <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
        <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsWithTabs',
  data() {
    return {
      activeTab: 'Tab 1',
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const echartsChart = echarts.init(this.$refs.echartsChart)

      // Echarts chart options
      const options = {
        // ...
      }

      echartsChart.setOption(options)
    },
  },
}
</script>

<style scoped>
.echarts-wrapper {
  position: relative;
}
.echarts-chart {
  width: 100%;
  height: 400px;
}
.tab-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

在这个示例中，我们将 Tabs 组件放在 Echarts 图表组件的底部，使用绝对定位进行定位。这样可以保证 Tabs 组件不会影响 Echarts 图表组件的样式，同时也保证了 Tabs 组件能够正常显示。