引言
开发前端项目过程中,有大量的图表数据需要展示,为了更方便地使用以及代码的复用,于是基于ECharts封装了各种各样的图表组件。直接使用封装好的组件对于刚接触我们项目的人来说会比较友好,而理解组件的封装思路和封装细节,将会有助于我们更加娴熟地运用组件到实践中。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的组件。
准备工作
在开始之前,我们先按照正常的组件注册流程,在项目 components 目录中新建一个名为 radar-chart 的组件,然后在一个 Demo 页面引入该组件使用。
新建的 radar-chart 组件内容:
// radar-chart.vue (子组件)
<template>
<div style="width: 100%; height: 100%;"></div>
</template>
<script>
export default {
name: 'radar-chart'
};
</script>
<style scoped>
</style>
Demo 页面代码:
// demo.vue (父组件)
<template>
<div style="border: 1px solid black; width: 400px; height: 300px; margin: 5px;">
<radar-chart></radar-chart>
</div>
</template>
<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
name: 'radar-chart-demo',
components: {
radarChart,
},
};
</script>
<style scoped>
</style>
Demo 页面效果图一:
初始化图表
准备工作完成之后,我们要做的是引入 ECharts,并在组件中初始化一个 ECharts 的实例,这里可以先照搬官网的实例和数据。 (1)在 radar-chart.vue 引入 ECharts :
// radar-chart.vue (子组件)
import echarts from 'echarts';
(2)在 methods 中创建图表配置数据的方法,数据格式参考 Echarts 官网:
// radar-chart.vue (子组件)
methods: {
// 初始化图表配置
initOption() {
let vm = this;
vm.option = {
title: {
text: '基础雷达图'
},