内容
记录组件封装思路
实现ECharts 组件的封装
写在前面
写在前面：对于愈来愈火的前端框架，用起来着实是让人很舒心。对于大型项目来说，组件化思想更是尤为重要，那么学会组件的封装自然是必不可少。本文浅谈一下封装组件的思路以及心得，希望对大家有所帮助。
1. 封装思路
1.1 观察文档，考虑组件需要的基本参数
每个组件需要的参数都很固定，包含：基本参数+独有参数
我们要做的就是：分离基本参数，父组件向子组件传递基本参数和独有参数
1.2 参数筛选，分为父组件传来的参数和自身参数
父组件传递的一般为基本参数，自身的参数为独有参数
1.3 完善组件，观察个别处与理想有无出入，更改配置项达到理想态
1.4 细节优化，考虑多种场景下，图表自适应处理
根据假设场景，做相应处理
2. ECharts 组件的封装
2.1 通过观察文档；常用的 ECharts组件都包含的配置项为： series，一些带坐标轴的图表都包含配置项：xAxis 、yAxis
2.2 我们在组件的 props 中接收父组件传递的参数，根据参数判断其是否有坐标轴，然后动态的渲染不同类型的图表（通过计算属性判断）
2.3 在ECharts 组件中定义两个方法：1、渲染组件的方法；2、渲染数据的方法（写在组件渲染前）
2.4 通过侦听器来监控 ECharts 组件接收的值是否放生改变，若改变就调用组件的渲染方法（达到视图的渲染）
具体封装代码（ECharts.vue）
<template>
<div style="height:100%" ref="echart"></div>
</template>
<script>
import echarts from 'echarts';
export default {
props: {
// 接收父组件传递的ECharts 数据
chartData: {
//定义出需要动态传递的参数
type: Object,
default() {
return {
xData: [],
series: [],
};
},
},
isAxisChart: {
type: Boolean,
default: true,
},
},
data() {
return {
//返回要渲染的数据
echart: null,
//# 含坐标轴的图表
axisOption: {
xAxis: {
//x轴数据
type: 'category',
data: [],
},
yAxis: [
//y轴数据（根据series 中的date 渲染）
{
type: 'value',
},
],
series: [], //数据渲染的结构
},
//# 不含坐标轴的图表
noAxisOption: {
series: [],
},
};
},
computed: {
//计算属性判断 是否渲染坐标轴
options() {
return this.isAxisChart ? this.axisOption : this.noAxisOption;
}
},
watch: {
chartData: {
handler() {
this.initChart();
},
deep: true, // 需要deep属性对 对象进行深度监听
}
},
methods: {
initChart() {
//# 初始化容器时，初始化数据
this.initChartData();
//初始化容器(图标)
if (this.echart) {
//若容器存在，直接渲染数据（官方api 写入配置）
this.echart.setOption(this.options);
} else {
this.echart = echarts.init(this.$refs.echart);
this.echart.setOption(this.options);
}
},
initChartData() {
//初始化数据
if (this.isAxisChart) {
//#把自身的数据替换成父组件传过来的数据
this.axisOption.xAxis.data = this.chartData.xData;
this.axisOption.series = this.chartData.series;
} else {
this.noAxisOption.series = this.chartData.series;
}
},
},
};
</script>
<style lang='less' scoped>
</style>
父组件代码：
<el-card shadow="hover">
<echart style="height:260px" :chartData="echartData.user"></echart>
</el-card>
<el-card shadow="hover">
<!-- 要用isAxisChart 来告诉子组件渲染的图表格式 -->
<echart style="height:260px" :chartData="echartData.video" :isAxisChart = "false"></echart>
</el-card>
注意：对于 ECharts 组件中的参数格式，可根据 ECharts 官网进行配置—ECharts官网
last
优化后的 ECharts 组件
<template>
<div style="height:100%" ref="echart"></div>
</template>
<script>
import echarts from 'echarts';
export default {
props: {
// 接收父组件传递的ECharts 数据
chartData: {
//定义出需要动态传递的参数
type: Object,
default() {
return {
xData: [],
series: [],
};
},
},
isAxisChart: {
type: Boolean,
default: true,
},
},
computed: {
//计算属性判断 是否渲染坐标轴
options() {
return this.isAxisChart ? this.axisOption : this.noAxisOption;
},
collapse() {
return this.$store.state.isCollapse;
},
},
data() {
return {
//返回要渲染的数据
echart: null,
//# 含坐标轴的图表
axisOption: {
tooltip: {
tirgger: 'item',
},
legend: {
textStyle: {
color: '#333',
},
},
xAxis: {
//x轴数据
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: '#33CC00',
},
},
},
yAxis: [
//y轴数据（根据series 中的date 渲染）
{
type: 'value',
},
],
// 配置展示数据的颜色
color: [
'#CC66FF',
'#33FF00',
'#663300',
'#FF3300',
'#999900',
'#FFFF00',
],
series: [], //数据渲染的结构
},
//# 不含坐标轴的图表
noAxisOption: {
tooltip: {
tirgger: 'item',
},
legend: {
textStyle: {
color: '#333',
},
},
color: [
'#CC66FF',
'#33FF00',
'#663300',
'#FF3300',
'#999900',
'#FFFF00',
],
series: [],
},
};
},
watch: {
chartData: {
handler() {
this.initChart();
},
deep: true,
},
collapse() {
setTimeout(this.listenResize, 300); // 监听折叠变量（实现折叠响应式变化图标）
},
},
methods: {
initChart() {
//# 初始化容器时，初始化数据
this.initChartData();
//初始化容器(图标)
if (this.echart) {
//若容器存在，直接渲染数据（官方api 写入配置）
this.echart.setOption(this.options);
} else {
this.echart = echarts.init(this.$refs.echart);
this.echart.setOption(this.options);
}
},
initChartData() {
//初始化数据
if (this.isAxisChart) {
//#把自身的数据替换成父组件传过来的数据
this.axisOption.xAxis.data = this.chartData.xData;
this.axisOption.series = this.chartData.series;
} else {
this.noAxisOption.series = this.chartData.series;
}
},
listenResize() {
//# 监听浏览器尺寸，做出响应式展示
this.echart ? this.echart.resize() : '';
},
},
mounted() {
// 挂载钩子，判断窗口大小
window.addEventListener('resize', this.listenResize);
},
destroyed() {
// 挂载卸载钩子，防止内存泄漏
window.removeEventListener('resize', this.listenResize);
},
};
</script>
<style lang='less' scoped>
</style>
注意：优化后的组件，新增了自定义颜色以及响应式的处理
扫描二维码关注公众号，回复：
11756409 查看本文章
心得
对于大部分组件的封装与 ECharts 组件的封装大同小异，我们要找到基本参数，然后逐步解析，本文结束。