记录一次 Vue 组件封装过程

引言

开发前端项目过程中,有大量的图表数据需要展示,为了更方便地使用以及代码的复用,于是基于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 页面效果图一: file

初始化图表

准备工作完成之后,我们要做的是引入 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: '基础雷达图'
                },
                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值