vue3 封装echarts 左右展示组件

Vue3封装ECharts左右展示组件是一种常见的做法，用于将复杂的图表库如ECharts集成到Vue应用中并实现复用和管理。以下是一个简单的步骤概述：

1. 引入依赖：首先，在你的Vue项目中安装ECharts库以及相关的依赖，例如`@vue/element-ui`如果要用到Element UI提供样式等。

npm install echarts @vue/element-ui

2. 创建组件：创建一个名为`ChartComponent.vue`的文件，这是一个自定义的Vue组件，它接受ECharts配置作为props，并渲染图表实例。

<template>
  <div ref="chartContainer" :style="{ width: '50%' + (isLeft ? '-50%' : ''), height: '400px' }">
    <div class="chart-container" :id="chartId"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as ECharts from 'echarts';

export default {
  props: {
    chartConfig: {
      type: Object,
      required: true
    },
    isLeft: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const chartInstance = ref(null);
    onMounted(() => {
      // 初始化ECharts实例
      const myChart = ECharts.init(document.getElementById(props.chartId));
      // 渲染图表
      myChart.setOption(props.chartConfig);
      // 绑定组件数据变化更新图表
      chartInstance.value = myChart;
    });

    return () => (
      <div>
        <button @click="toggleSide">切换图表位置</button>
        <button @click="resizeChart">调整图表大小</button>
        {isLeft ? null : chartInstance}
      </div>
    );

    function toggleSide() {
      this.isLeft = !this.isLeft;
    }

    function resizeChart() {
      // 可以在此添加调整图表大小的逻辑
    }
  }
};
</script>

<style scoped>
.chart-container {
  position: relative;
  overflow: hidden;
}
</style>

3. 使用组件：在需要显示图表的地方导入并在模板中使用这个组件，传递所需的配置和是否显示在左侧。

<template>
  <div>
    <ChartComponent :chartConfig="leftChartConfig" :isLeft="true" chartId="left-chart"></ChartComponent>
    <ChartComponent :chartConfig="rightChartConfig" :isLeft="false" chartId="right-chart"></ChartComponent>
  </div>
</template>

<script>
...
data() {
  return {
    leftChartConfig: ...,
    rightChartConfig: ...
  };
}
...
</script>