Vue 3 封装 ECharts 图表组件实战

在前端开发中，使用 ECharts 可以轻松地创建各种动态图表。本文将介绍如何在 Vue 3 中封装一个可重用的 ECharts 图表组件，并演示如何使用这个组件来创建柱状图、折线图和饼图。

1. 准备工作

首先确保你的项目中已安装了 ECharts 和 vue-echarts（如果使用官方的 Vue 组件）：

npm install echarts

2. 创建通用图表组件

我们将创建一个名为 Chart.vue 的组件，它可以接受不同的图表类型和配置选项，并根据这些选项动态渲染图表。

Chart.vue

<template>
  <div ref="chartRef" :style="{width: '100%', height: '400px'}" />
</template>

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

const props = defineProps({
  chartType: {
    type: String,
    default: 'bar'
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

const chartRef = ref(null);
let chartInstance = null

onMounted(() => {
  initChart();
});

watch(
  () => props.options,
  () => {
    if (chartInstance) {
      chartInstance.setOption(props.options);
    }
  },
  { deep: true }
);

const initChart = () => {
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({
    ...props.options,
    series: [
      {
        type: props.chartType,
        data: props.options.series && props.options.series[0].data
      }
    ]
  });
};

</script>

解释

• 模板部分：定义一个 div 容器，用于放置 ECharts 图表。
• 脚本部分：
  • 使用 defineProps 来定义组件接收的属性，包括 chartType（图表类型）和 options（图表配置选项）。
  • 使用 ref 来引用图表容器。
  • 在 onMounted 钩子中初始化图表。
  • 使用 watch 监听 options 属性的变化，并在变化时更新图表配置。
  • initChart 方法用于初始化图表实例，并设置初始选项。

3. 使用组件

接下来，我们将在父组件中使用 Chart.vue 组件，并传递不同的图表类型和配置选项。

ParentComponent.vue

<template>
  <div id="app">
    <chart chart-type="bar" :options="barOptions" />
    <chart chart-type="line" :options="lineOptions" />
    <chart chart-type="pie" :options="pieOptions" />
  </div>
</template>

<script setup>
import chart from './chart.vue';

const barOptions = {
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

const lineOptions = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 132, 101, 134, 90, 230, 210],
      type: 'line'
    }
  ]
};

const pieOptions = {
  tooltip: {},
  legend: {
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
};
</script>

解释

        模板部分：使用 Chart 组件，并传递不同的图表类型和配置选项。

        脚本部分：定义三种不同类型的图表配置选项，并传递给 Chart 组件。

4. 总结

        通过以上步骤，我们成功封装了一个可复用的 ECharts 图表组件，并展示了如何在 Vue 3 应用程序中使用这个组件来创建不同类型的图表。这样你就有了一个可以灵活使用的图表组件，它可以根据需要展示柱状图、折线图或饼图。你可以根据具体需求调整 options 来定制每个图表的样式和数据。

        希望这篇文章能帮助你在实际项目中更好地利用 ECharts 进行数据可视化。