vue3 封装ECharts组件

一、前言

前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。

ECharts图表大家应该用的都比较多，基础的用法就不细说了，具体用法参考ECharts官网。

二、封装ECharts组件

为什么要封装组件

• 避免重复的工作量，提升复用性
• 使代码逻辑更加清晰，方便项目的后期维护
• 封装组件可以让使用者不去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行

封装的ECharts组件实现了以下的功能：

• 使用组件传递ECharts中的 option 属性
• 手动/自动设置chart尺寸
• chart自适应宽高
• 动态展示获取到的后端数据

本文使用的是vue3 + typescript的写法。

代码实现：

ECharts组件：

ECharts组件的用法: 

options.ts文件

// 所有用到的 echarts option 都在这里进行配置
const chartOption = {
  // 温湿度折线图
  testOption(data: any, dimensions: any) {
    const option = {
      grid: {
        left: '2%',
        right: '2%',
        bottom: '10%',
        containLabel: true
      },
      legend: {
        top: 'bottom',
        textStyle: {
          color: '#999'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      dataset: {
        dimensions: dimensions,
        source: data
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 130],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 1,
            color: function (params: any) {
              //自定义颜色
              const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
              return colorList[params.dataIndex];
            }
          },
          encode: {
            itemName: dimensions[0],
            value: dimensions[1],
            tooltip: dimensions[1]
          }
        }
      ]
    };
    return option;
  }
}

效果：