Echarts组件封装（数据、样式、配置项）

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

首先安装 Echarts：

npm install echarts --save

在 Vue 3 中，你可以通过封装一个组件来实现 Echarts 图表的可定制化，并且根据传入的参数绘制不同样式的图表。下面是一个简单的示例:

创建一个名为 EchartsChart 的组件:

<template>
  <div ref="chart" :style="chartStyle"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  props: {
    chartData: {     // 接收数据的参数
      type: Array,
      required: true
    },
    chartOptions: {     // 接收配置项的参数
      type: Object,
      required: true
    },
    chartStyle: {    // 接收样式的参数
      type: Object,
      default: () => ({ width: '400px', height: '300px' })
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption(this.chartOptions);
      chart.setOption({
        series: [
          {
            type: 'bar',
            data: this.chartData
          }
        ]
      });
    }
  }
};
</script>复制

在需要使用图表的页面中，导入并使用 EchartsChart

<template>
  <div>
    <EchartsChart
      :chartData="data1"
      :chartOptions="options1"
      :chartStyle="style1"
    />
    <EchartsChart
      :chartData="data2"
      :chartOptions="options2"
      :chartStyle="style2"
    />
  </div>
</template>
 
<script>
import EchartsChart from '@/components/EchartsChart.vue';
 
export default {
  components: {
    EchartsChart
  },
  data() {
    return {
      data1: [120, 200, 150, 80, 70],
      options1: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        }
      },
      style1: { width: '400px', height: '300px' },
      data2: [50, 100, 120, 80, 90],
      options2: {
        xAxis: {
          type: 'category',
          data: ['F', 'G', 'H', 'I', 'J']
        },
        yAxis: {},
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        }
      },
      style2: { width: '600px', height: '400px' }
    };
  }
};
</script>复制

上述示例中，EchartsChart 组件接收 chartData、chartOptions 和 chartStyle 三个参数，分别用于传入图表的数据、配置项和样式。在 mounted 钩子函数中，通过 echarts.init 初始化图表实例，并利用传入的参数进行绘制。

在需要使用图表的页面中，可以多次调用 EchartsChart 组件，并分别传入不同的参数进行绘制。确保每个图表组件都有独立的引用，避免只显示一个的问题。

请注意，上述示例仅提供了基本的封装思路，具体的数据、配置项和样式需要根据自己的实际需求进行调整。