封装 Echarts 为 Vue.js 组件教程

在上一家公司里，公司的产品用到了大量的图表进行数据可视化，当时公司决定使用的是 Echarts，它是一个与框架无关的 JS 图表库，所以需要自行封装到 react 或 vue 中。今天这个视频来看看如何使用简单的方式把 echarts 封装到 vue 组件中。

搭建基础结构#

首先我们用 Vite 创建一个 vue 项目，命名为 vue-echarts，然后安装 echarts 依赖。

yarn create @vitejs/app
yarn add echarts

安装完成后，新建一个 Chart 组件，作为基础组件加载并初始化 echarts 容器，并根据配置的变化更新图表。

<template>
  <div class="container"></div>
</template>

<script setup></script>

初始化 Echarts#

Echarts 需要一个 dom 元素作为容器，并调用它的 init()方法进行初始化，那么在 vue 中获取 dom 元素需要使用 template ref，而在 vue3 中，template ref 跟响应式状态的 ref 合为了一体，所以，我们定义一个 ref 来保存 dom 元素。

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import { ref } from "vue";
const container = ref(null);
</script>

ref 中保存的元素在 dom 加载完成之后才会有值，所以我们需要在 onMounted 生命周期中获取它，因为这时 dom 已经加载完成了。获取了容器之后，就可以使用 echarts.init() 初始化了，这里导入 echarts 库进行初始化，使用深色主题，初始化后会返回 echarts 实例：

import { ref } from "vue";
import * as echarts from "echarts";

const container = ref(null);
onMounted(() => {
  const chart = echarts.init(container.value, "dark");
});

接着让 Chart 组件接收一个 options 属性，用于接收图表配置，在 echarts 初始化完成以后把配置传给 echarts 实例，options 是一个必须的属性，类型为对象，默认值是空的对象：

// ...
const props = defineProps({
  options: {
    type: Object,
    default: {},
    required: true,
  },
});
// ...
onMounted(() => {
  const chart = echarts.init(container.value);
  chart.setOption(props.options);
});

监听配置变化#

这个时候，Chart 组件虽然可以使用了，但是当 options 变化的时候，图表不会刷新，我们可以在这里使用 watch ，对 options 进行监听，当 options 发生变化时，调用 echarts.setOption() 更新配置，不过，在 watch 里不能访问 onMounted() 里边的 echarts 实例，这时我们可以把 echarts 实例也保存在 ref 中，这样，就可以在 watch 中使用了：

const container = ref(null);
const chart = ref(null);

onMounted(() => {
  chart.value = echarts.init(container.value);
  chart.value.setOption(props.options);
});

// ...

watch 中的代码很简单，就是调用 echarts.setOptions()，把新的 options 值传递进去就行了。watch 第一个参数可以是一个 ref，我们把 options 转换为 ref 传递给它，第二个参数是处理函数，它接受两个参数，分别是监听属性新变化的值和之前的值，我们把新变化的值传递给 echarts，这样就可以重新绘制图表了。第三个参数为是否深度对比，对于配置项这种嵌套比较多的对象，需要设置为 true。

// ...
const { options } = toRefs(props);

// ...
watch(
  options,
  (newOptions) => {
    chart.value.setOption(newOptions);
  },
  { deep: true }
);

最后加上 css，给容器设置宽高为 100%，具体的真实宽高让使用它的组件来设置，这里要注意 echarts 要求必须设置宽高才能正常绘制。

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

加载图表#

我们试试加载一个图表，从 echarts 官网找一个示例配置，例如柱状图，复制下来，然后在 src 目录下创建一个 charts 文件夹，存放图表数据，新建一个 barChartOptions.js 文件，粘贴刚才复制的配置，我们这里可以导出一个函数，以后可以通过参数来传递数据和自定义的配置项：

export default function barChartOptions() {
  return {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ["product", "2012", "2013", "2014", "2015"],
        ["Matcha Latte", 41.1, 30.4, 65.1, 53.3],
        ["Milk Tea", 86.5, 92.1, 85.7, 83.1],
        ["Cheese Cocoa", 24.1, 67.2, 79.5, 86.4],
      ],
    },
    xAxis: [
      { type: "category", gridIndex: 0 },
      { type: "category", gridIndex: 1 },
    ],
    yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
    grid: [{ bottom: "55%" }, { top: "55%" }],
    series: [
      // These series are in the first grid.
      { type: "bar", seriesLayoutBy: "row" },
      { type: "bar", seriesLayoutBy: "row" },
      { type: "bar", seriesLayoutBy: "row" },
      // These series are in the second grid.
      { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
    ],
  };
}

然后新建一个 BarChart 组件：

// BarChart.vue
<template></template>
<script setup></script>
<style scoped></style>

再在 App 组件中引入它，设置 class 为 chart，然后给 App 组件的 div 容器和图表设置一下宽高、背景、对齐等样式：

// App.vue
<template>
  <div class="wrapper">
    <BarChart class="chart" />
  </div>
</template>
<script setup>
import BarChart from "./components/BarChart.vue";
</script>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: hsl(210deg, 20%, 10%);
}
.wrapper {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}
.wrapper .chart {
  width: 50%;
  height: 70%;
}
</style>

回到 BarChart 组件中，引入 Chart 组件和配置项，最后在 template 中加载图表，注意这里配置项是个函数，需要使用小括号进行调用，这时图表就加载成功了：

<template>
  <Chart :options="barChartOptionCreator()" />
</template>

<script setup>
import Chart from "./Chart.vue";
import barChartOptionCreator from "../charts/barChartOptions.js";
</script>

现在可以随便修改一下图表配置（例如某个数据项），保存，看到可以重新绘制图表了，不过有时候后改多了，图表不会重新绘制，这时候重新启动下服务就好了，不知是不是 Vite 的原因，这个有精力的小伙伴可以研究一下。好了，这个就是封装 Echarts 为 Vue.js 组件教程，如果有帮助，请三连，想更好的学前端，请关注峰华前端工程师，感谢观看！