跳到主要内容位置

封装 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 组件教程,如果有帮助,请三连,想更好的学前端,请关注峰华前端工程师,感谢观看!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买