什么网站做热能表好,网站搭建联系方式,昆明网红街,辽宁省造价信息网背景#xff1a;如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目#xff0c;不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、UI统一#xff0c;又可以灵活扩充Echarts的各种复杂配置项配置就变得极为重要。 封装目标
符… 背景如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、UI统一又可以灵活扩充Echarts的各种复杂配置项配置就变得极为重要。 封装目标
符合当前系统的业务UI轴线、分隔线、配色、面积色、legend 等等及场景可基于基础配置项便捷扩充其他特殊配置项可支持Echarts原生配置项不引入过多额外的配置项
封装误区
基于Echarts配置项封装了基础配置项组件但是组件无法扩充额外的配置项使用不灵活即总是需要频繁修改封装组件在Echarts的的配置项上又封装了一层改变了很多的配置项内容使用成本较高往往需要查看组件源码才知道要传入什么配置项属性
封装思路 Vue项目实践
线图封装
templatediv v-ifnotEmpty :idid classecharts-line/divdiv v-else classecharts-empty暂无数据/div
/templatescript
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);});},},};
/scriptstyle langless relstylesheet/less scoped
.echarts-line{height: 350px;
}.echarts-empty{height: 200px;line-height: 200px;text-align: center;
}
/style业务调用
v-line-chart classecharts-item :echarts-datachartData/v-line-chartthis.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.htmldeepMerge gitHubhttps://github.com/TehShrike/deepmerge 业务方案简单封装不作为公共UI库使用欢迎讨论其他实现方案
