如何基于 Echarts 进行二次封装?

  • Z时代
  • 2024-03-07
  • 分类：IT

如何基于 Echarts 进行二次封装?

  • 项目背景

最近在做项目的时候,遇到了大量的利用 Echarts 开发的图表展示功能,而且都是一些常规的图表 折线图饼图柱状图 之类的

  • 项目现状

项目成员每个文件利用源生的Echarts 配置,主要是 options 参数.导致每个文件会重复大量的一模一样的 options.
举个? 一个简单的折线图,每个文件都会产生以下配置

const option = {
  color: ['#5B8FF9', '#FC8900'],
  title: {
    left: '16',
    text: '',
    textStyle: {
      fontSize: '14'
    }
  },
  grid: {
    top: 50,
    left: 90,
    right: 90,
    bottom: 40
  },
  legend: {
    data: [
      {
        name: '不合格率'
      }
    ],
    right: 20
  },
  xAxis: {
    data: dataX,
    axisLabel: {
      formatter: function(value, index) {
        return value
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '不合格率（%）',
      nameLocation: 'middle',
      nameTextStyle: {
        color: '#787878',
        padding: 40
      },
      min: 0,
      max: yMax,
      interval: stepNum,
      axisLabel: {
        formatter: '{value}'
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '不合格率',
      type: 'line',
      data: dataY,
      label: {
        show: true,
        position: 'top',
        formatter: '{@rate} %'
      }
    }
  ]
  }
  • 目前思路

想把一些公共的配置 独立出来,自己再封装一个类 MyCharts
每个图表类型 都有维护独立的 options.js 文件
传入_el,_type,_dataX,_dataY四个参数 就能渲染一个简单的图表(同时也支持传入 Echarts 源生配置)

const myCharts = new MyCharts({
  _el: '#main', // 配置 dom
  // echarts 源生配置
  title: {
    text: 'Stacked Line'
  },
  _type: 'line', // 配置类型
  _dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 配置 x 轴数据
  _dataY: [150, 230, 224, 218, 135, 147, 260] // 配置 y 轴数据
})
}
  • 遇到的问题

1.为了方便 区分参数 把我自定义的参数 都以下划线 _ 开头,是否合理?
2.目前这个思路是否有问题?还是有点画蛇添足的感觉?
3.如果后期要扩展多种类型的图表,目前这种方案是否可扩展?

回答：

  1. 没必要
  2. 通常都会二次封装，程度区别而已
  3. 能不能扩展是你决定的

其实首先要搞清楚自己要干什么，然后有目的的二次封装就好了。

我项目里面是这样处理的，针对不同类型的图，按UI要求调试后分别生成默认配置文件，然后实际使用时传入自定义配置（包含图表类型、数据等）和额外的标准图表配置，然后按照默认配置文件、额外的标准图表配置、根据自定义配置转换出来的图表配置的顺序叠加形成最终的配置文件，然后进行渲染就好了。

你可以把普通坐标系的封装为一个组件，极坐标系的封装为一个组件，也可以都封一起，看个人喜好了实际场景了。

以上是 如何基于 Echarts 进行二次封装? 的全部内容， 来源链接： utcz.com/p/936672.html

回到顶部