业务项目中Echarts图表组件的封装实践方案

背景：如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目，不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、UI统一，又可以灵活扩充Echarts的各种复杂配置项配置就变得极为重要。

封装目标

• 符合当前系统的业务UI（轴线、分隔线、配色、面积色、legend 等等）及场景
• 可基于基础配置项便捷扩充其他特殊配置项
• 可支持Echarts原生配置项，不引入过多额外的配置项！！！

封装误区

• 基于Echarts配置项封装了基础配置项组件，但是组件无法扩充额外的配置项，使用不灵活（即总是需要频繁修改封装组件）
• 在Echarts的的配置项上又封装了一层，改变了很多的配置项内容，使用成本较高（往往需要查看组件源码才知道要传入什么配置项属性）

封装思路

Vue项目实践

线图封装

<template><div v-if="notEmpty" :id="id" class="echarts-line"></div><div v-else class="echarts-empty">暂无数据</div>
</template><script>
import echarts from 'echarts';
import deepmerge from 'deepmerge';// 系统自定义区域
const colors = []; // 系统自定义的主题配色export default {name: 'EchartsLine',props: {echartsData: {type: Object,required: true,},},data() {return {lineChart: null,};},computed: {id() {return `echarts_line_${this.echartsData.id}`;},notEmpty() {return this.echartsData && this.echartsData.category.length > 0 && this.echartsData.series.length > 0;},},watch: {echartsData(value) {if (this.lineChart) {this.lineChart.setOption(this.getMergeOptions(value));this.lineChart.resize();}},},mounted() {this.init();},beforeDestroy() {window.removeEventListener('resize', this._listenerResize);},methods: {// [private] 处理轴的类型配置项，支持x轴为类目轴 | y轴为类目轴 | 双数据轴_dealAxisType(type, category) {const categoryAxis = {type: 'category',boundaryGap: true,data: category,};const valueAxis = {type: 'value',};switch (type) {case 'xCategory':return {xAxis: categoryAxis,yAxis: valueAxis,};case 'yCategory':return {yAxis: categoryAxis,xAxis: valueAxis,};case 'doubleValue':return {xAxis: {max: 'dataMax',boundaryGap: true,splitLine: {show: false,},},yAxis: {},};default:return {xAxis: categoryAxis,yAxis: valueAxis,};}},// [private] 获取线图默认配置项，系统整体统一UI_getDefaultOptions(type, category) {return {title: {subtext: '',left: 'center',textStyle: {color: '#98a6ad',fontSize: 16,fontWeight: 'normal',},},legend: {type: 'scroll',bottom: '0',},grid: {top: '30px',bottom: '50px',},color: colors,tooltip: {trigger: 'axis',axisPointer: {type: 'cross',},},...this._dealAxisType(type, category),};},// [private] 监听resize时间_listenerResize() {if (this.lineChart) {this.lineChart.resize();}},/*** [public] getMergeOptions 获取合并后的图表配置项，自定义配置项与默认配置项融合，若自定义配置项与默认配置项冲突则自定义配置项生效* 配置项合并规则：https://www.npmjs.com/package/deepmerge* @param type {String} * @param category {Array}* @param series {Array}* @param echartsConfig {Object}*/getMergeOptions({type = 'xCategory',category,series,echartsConfig = {},}) {// 01. 用户传进来的配置项和默认配置项进行合并const mergeOptions = deepmerge(this._getDefaultOptions(type, category),echartsConfig,);// 02. Series配置项合并【此处为示例】const mergeSeries = [];if (series && series.length > 0) {series.forEach((item) => {mergeSeries.push(deepmerge(item, {type: 'line',}),);});}// 03. 返回合并后的整体配置项 return {...mergeOptions,series: mergeSeries,};},// [public] 交互点，获取图表实例，用于触发图表APIgetEchartsInstance() {if (this.lineChart) {return this.lineChart;}return null;},// [public] 初始化图表init() {this.$nextTick(() => {this.lineChart = echarts.init(document.getElementById(this.id));this.lineChart.setOption(this.getMergeOptions(this.echartsData),);window.addEventListener('resize', this._listenerResize);});},},};
</script><style lang="less" rel="stylesheet/less" scoped>
.echarts-line{height: 350px;
}.echarts-empty{height: 200px;line-height: 200px;text-align: center;
}
</style>

业务调用

<v-line-chart class="echarts-item" :echarts-data="chartData"></v-line-chart>

 this.chartData = {id: 'lineChart',category:['test1','test2','test3','test4'],series: [{name: '测试图表',data:[10,20,30,40],}],echartsConfig: { // 所有Echarts原生配置项放在该属性下legend: {show: false,},},
};

参考

• Echarts官网：https://echarts.apache.org/zh/index.html
• deepMerge gitHub：https://github.com/TehShrike/deepmerge

业务方案简单封装，不作为公共UI库使用，欢迎讨论其他实现方案