关于javascript:记录一次-Vue-组件封装过程

39次阅读

共计 5195 个字符，预计需要花费 13 分钟才能阅读完成。

引言

开发前端我的项目过程中，有大量的图表数据须要展现，为了更不便地应用以及代码的复用，于是基于 ECharts 封装了各种各样的图表组件。间接应用封装好的组件对于刚接触咱们我的项目的人来说会比拟敌对，而了解组件的封装思路和封装细节，将会有助于咱们更加娴熟地使用组件到实际中。本文将会以雷达图为案例，一步步解说在 vue 我的项目中如何应用 ECharts，如何将其封装为能反复调用的组件。

筹备工作

在开始之前，咱们先依照失常的组件注册流程，在我的项目 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: '根底雷达图'},
                tooltip: {},
                legend: {data: ['估算调配（Allocated Budget）', '理论开销（Actual Spending）']
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [{name: '销售（sales）', max: 6500}, {name: '治理（Administration）', max: 16000}, {name: '信息技术（Information Techology）', max: 30000}, {name: '客服（Customer Support）', max: 38000}, {name: '研发（Development）', max: 52000}, {name: '市场（Marketing）', max: 25000}]
                },
                series: [{
                    name: '估算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [{value: [4300, 10000, 28000, 35000, 50000, 19000], name: '估算调配（Allocated Budget）'}, {value: [5000, 14000, 28000, 31000, 42000, 21000], name: '理论开销（Actual Spending）'}]
                }]
            };
        },
    },

（3）初始化图表：
在组件钩子 mounted 办法中：

// radar-chart.vue（子组件）mounted() {this.initOption();
        this.$nextTick(() => { // 这里的 $nextTick() 办法是为了在下次 DOM 更新循环完结之后执行提早回调。也就是提早渲染图表防止一些渲染问题
            this.ready();});
    },

在 methods 中：

// radar-chart.vue（子组件）ready() {
            let vm = this;
            let dom = document.getElementById('radar-chart');

            vm.myChart = echarts.init(dom);
            vm.myChart && vm.myChart.setOption(vm.option);
        },

Demo 页面效果图二：

这里一共分了三步，引入 ECharts、初始化图表配置、初始化图表，最初能够在 Demo 页面中看到，曾经初步地把 ECharts 的雷达图显示到我的项目中来了。

提取图表配置属性（重点）

下面咱们曾经胜利创立一个雷达图了，然而很显著的是，radar-chart.vue 里的数据写死的，无奈反复调用。接下来着手封装的事件了。

封装的思路是这样的：

  1. demo.vue 向 radar-chart.vue 传递一组个性化数据
  2. radar-chart.vue 通过 props 选项接收数据
  3. 提炼接管到的数据，笼罩配置数据 option
  4. 初始化图表

具体实现：
向子组件传递数据，在 data 中定义变量，在 mounted 中赋值 

// demo.vue（父组件）<template>
    <div style="border: 1px solid black; width: 900px; height: 600px; margin: 5px;">
        <radar-chart :indicator="indicator" :legendData="radarData"></radar-chart>
    </div>
</template>

<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
    name: 'radar-chart-demo',
    components: {radarChart,},
    mounted() {
        this.indicator = [{ name: '销售', max: 6500},
            {name: '治理', max: 16000},
            {name: '信息技术', max: 30000},
            {name: '客服', max: 38000},
        ];
        this.radarData = [
            {value: [4000, 15000, 26000, 21000],
                name: '理论开销（Actual Spending）',
            }
        ];
    },
    data() {
        return {indicator: [], // 雷达指示器数据
            legendData: [], // 雷达图例数据};
    },
};
</script>

<style scoped>

</style>

在 props 中接管来自父组件的数据 

// radar-chart.vue（子组件）props: {
        // 指示器数据，必传项
        // 格局举例 [{name: 'a', max: 1},{name: 'a', max: 1},{name: 'a', max: 1}]
        indicator: {
            type: Array,
            default: () => []
        },
        // 图例数据，必填项。// 格局举例 [{value: [5000, 14000, 28000], name: 'name' }，{value: [5000, 14000, 28000], name: 'name' }]
        legendData: {
            type: Array,
            default: () => []
        },
    },

** 在 ready() 中更新图表数据 option
如果在这里更新 indicator、data 这两个属性值，initOption() 中就不须要初始化这两个值了 **

// radar-chart.vue（子组件）ready() {
            let vm = this;
            let dom = document.getElementById('radar-chart');

            vm.myChart = echarts.init(dom);

            // 失去指示器数据
            vm.option.radar.indicator = vm.indicator;
            // 失去图例数据
            vm.option.series[0].data = vm.legendData;

            vm.myChart && vm.myChart.setOption(vm.option);
        },

Demo 页面效果图三：

细节优化与其余注意事项

以下代码均是基于已实现代码的批改和增加

1. 一个页面有多个图表的状况下，主动生成图表 ID。实现原理参考 ES6 模块化和 .vue 组件的利用举例。补充代码：

// radar-chart.vue（子组件）<template>
    <div :id="chartId" style="height: 100%; width: 100%;"></div>
</template>

<script>
let chartIdSeed = 1;

export default {data() {
        return {chartId: 1,};
    },
    mounted() {
        let vm = this;
        vm.chartId = 'radar-chart_' + chartIdSeed++;
    },
    methods: {
        let vm = this;
        let dom = document.getElementById(vm.chartId);
    }
};
</script>

2. 图表数据属性用 props 接管，图表默认配置属性用 defaultConfig 保留，父组件传入的配置属性 chartConfig 通过 $attrs 间接获得，最终合并为 finallyConfig 应用，利于扩大与保护。补充代码：

// radar-chart.vue（子组件）<script>
export default {data() {
        return {
            // 默认配置项。以下配置项能够在父组件 :chartConfig 进行配置，会笼罩这里的默认配置
            defaultConfig: {tooltipShow: true},
            finallyConfig: {}, // 最初配置项};
    },
    mounted() {
        // 在这里合并默认配置与父组件传进来的配置
        vm.finallyConfig = Object.assign({}, vm.defaultConfig, vm.$attrs.chartConfig);
    },
    methods: {initOption() {
            vm.option = {
                tooltip: {show: vm.finallyConfig.tooltipShow, // 在这里应用最终配置},
            }
        },
    }
};
</script>

3. 应用 watch 监听图表数据更新 

// radar-chart.vue（子组件）watch: {legendData() {this.$nextTick(() => {this.ready();
            });
        }
    },

4. 增加窗口 resize 事件和图表 click 事件 

// radar-chart.vue（子组件）export default {data() {
        return {chartResizeTimer: null, // 定时器，用于 resize 事件函数节流};
    },
    methods: {ready() {
            // 增加窗口 resize 事件
            window.addEventListener('resize', vm.handleChartResize);
            
            // 触发父组件的 @chartClick 事件
            vm.myChart.on('click', function(param) {vm.$emit('chartClick', param);
            });
        },
        
        // 解决窗口 resize 事件
        handleChartResize() {
            let vm = this;
            clearTimeout(vm.chartResizeTimer);
            vm.chartResizeTimer = setTimeout(function() {vm.myChart && vm.myChart.resize();
            }, 200);
        },
    },
    beforeDestroy() {
        // 开释该图例资源，较少页面卡顿状况
        if (this.myChart) this.myChart.clear();
        // 移除窗口 resize 事件
        window.removeEventListener('resize', this.handleChartResize);
    }
};

正文完
javascript
发表至： javascript
2021-03-15
 0
关于javascript:玩转事件循环
关于javascript:javaScript之异步发展史二generatorasync
关于javascript:LeetCode判断扑克牌顺子
关于javascript:关于Typescript在前端的体验漫谈