content
Record component packaging ideas,
realize the encapsulation of ECharts components
Write in front
Written in the front: For the increasingly popular front-end framework, it is really comfortable to use. For large-scale projects, the idea of componentization is particularly important, so learning the encapsulation of components is naturally essential. This article talks about the ideas and experience of packaging components, I hope it will be helpful to everyone.
1. Packaging ideas
1.1 Observe the document and consider the basic parameters required by the component
The parameters required for each component are fixed, including: basic parameters + unique parameters
What we have to do is to separate the basic parameters, and the parent component to pass the basic parameters and unique parameters to the child component
1.2 Parameter filtering, divided into parameters passed from the parent component and its own parameters
The parameters passed by the parent component are generally basic parameters, and their own parameters are unique parameters
1.3 Improve the components, observe whether there is any difference between the individual parts and the ideal, and change the configuration items to achieve the ideal state
1.4 Detailed optimization, considering various scenarios, adaptive processing of charts
According to the hypothetical scenario, do the corresponding processing
2. Encapsulation of ECharts components
2.1 By observing the document; CI ECharts common components are contained as follows: seriesSome Charts with axes contains configuration items: xAxis,yAxis
2.2 In our assembly propsthe transmission parameter receiving parent component, according to the parameters it is determined whether the coordinate axes, and different types of charts dynamic rendering (property determination by calculation)
2.3 Two methods are defined in the ECharts component: 1. The method of rendering the component; 2. The method of rendering the data (written before the component rendering)
2.4 Use the listener to monitor whether the value received by the ECharts component changes, and if it changes, call the component's rendering method (to achieve the rendering of the view)
Specific package code (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>
Parent component code:
<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>
Note: The parameter format in the ECharts component can be configured according to the ECharts official website — ECharts official website
last
Optimized ECharts component
<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>
Note: The optimized component has added custom colors and responsive processing
Experience
The encapsulation of most components is similar to that of ECharts components. We need to find the basic parameters and analyze them step by step. This article ends.