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

本文链接：https://blog.csdn.net/weixin_41305441/article/details/135414565

背景：如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目，不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、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: