写在前面

大家好，我是江枫眠，在前端行业摸排滚打好多年，欠过技术债，也还过技术债，不管前端还能做几年，励志写可维护的前端代码

场景

项目中刚开始Echarts只有dashboard使用，不多，只有3个，我把setOption 数据拿到一个js中使用，觉得挺好，后来项目中又有地方要使用，再后来又有地方使用，显然不太利于维护，于是自己抽出一天时间对Echarts进行简单的二次封装，写成了hooks，当然了没有过多的边界值，只适用于自己的项目，也是在通过项目使用中不断的完善。

思路分析

1，首先initEchart

2，echarts 类型

3，setOption 

4，销毁

5，resize

代码部分

import echarts from '@/utils/echarts' //我按需引入的echarts 详见官网
//可以在config里面配置参数
export const useEchart = (config = {}) => {
    
    let echartInstance = null
    /*
    * 初始化 echart
    */
    const initEchart = (echartEle) => {
    //如果没有就init 如果已经有了就销毁重建
    // ?可以思考一下，如果有初始化就重新赋值数据，这里我偷懒了
        if (echartInstance) {
          disposeEchart()
        }
        echartInstance = echarts.init(echartEle)
    }
    /*
    *设置options
    * type 通过这个参数决定echart的图像类型，可以自行往里添加，同时也要把基础的配置项添加进来
    */
    const setOptions = (params = {}) => {
        switch (config.type) {
          case 'line': //线形图
            ... //数据赋值
            echartInstance.setOption(lineOptions)
            break
          case 'pie': //饼图
            ... //数据赋值
            break
          case 'bar': //柱状图
            barOptions.series[0].data = params.series
            barOptions.xAxis.data = params.xAxis
            echartInstance.setOption(barOptions)
            break
          default:
            break
        }
      }
    /*
    * 缩放 echarts 
    */
    const resizeEchart = () => {
      window.onresize = function () {
         echartInstance.resize()
      }
    }
    /*
    * 销毁 echart
    */
    const disposeEchart=()=>{
        echartInstance.dispose()
        //销毁完成取消resize事件
        window.onresize = null
    }
   //线形图配置项
   const lineOptions={...}
   //饼图配置项
   const pieOptions={...}
   //柱状图片配置项
   const barOptions = {
    title: {
      text: config.title,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        name: config.name,
        type: 'bar',
      },
    ],
  }
    return { initEchart, setOptions, resizeEchart, disposeEchart }
})

如何使用

import { useEchart } from '@/hooks/useEchart'

const myChart = useEchart({ title: 'title', type: 'bar', name: '违规次数' })
//初始化
myChart.initEchart(eleRef.value)
//setOption
myChart.setOptions({
  series: seriesData,//你要赋值的数据
  xAxis: xAxisData, //你要赋值的数据
})

...
页面销毁时，销毁echart
window.onresize resizeEchart  //echart缩放

最后

嗯，到这里差不多结了，这只是个基础框架，有很多地方都可以拓展，可以根据自己的项目需求进行修改。