函数封装实现Echarts多表渲染/叠加渲染

前言

继上一篇文章通过拖拽实现Echart可视化渲染后，在多个表的情况下必定要渲染多个表，而且表的数据和横纵坐标指标不一样，那难道要每一个表都要写一段配置吗，然后我就开始找不同表的共同点，然后发现只要把Echarts官网上给的图表配置中的option封装成函数，这个函数用来返回option的值就好了，然后只需改变不同表的data,把这个data传给这个函数就能返回这个表的所有配置，就不用重复写配置啦

实现的效果

实现逻辑

省流版：就是把Echarts官网的代码复制下来把里面的option配置封装成函数，并传入自定义的data

图表渲染整体函数renderChart

根据传入的zoneId找到要渲染图表的 DOM 容器，如果没有DOM容器直接返回，下面的所有逻辑判断都不用参与
判断该容器中是否有实例，先销毁该容器中已有的 ECharts 实例（避免重复渲染）
根据Id（组件类型）的不同进行匹配：
- 准备对应的数据
- 调用相应的配置函数（柱状图 / 饼图 / 折线图）
初始化新的 ECharts 实例并绘制图表

核心就是：先清旧图 → 按类型准备数据和配置 → 画新图，实现了不同图表的动态切换渲染。

js 复制代码

  const renderChart = (zoneId,Id) => {
    const componentId=Id//拿到要渲染的组件id用于下面的switch操作
    var chartDom = document.getElementById(`chart-${zoneId}`)//获取要渲染的区域
    
    var CheckChart = echarts.getInstanceByDom(chartDom);获取dom实例
    if (CheckChart) {
          CheckChart.dispose();
          
    }//检查是否已经有渲染的实例，如果有就销毁
    if (!chartDom) {
      console.error(`Canvas element with id chart-${zoneId} not found`)//看是否有区域能渲染
      return
    }else{
      var myChart = echarts.init(chartDom);//初始化，创建图表实例
      //注意这里一定要先销毁前面的已存在的实例再初始化
      //如果初始化再销毁会渲染不出来，因为刚建的实例已经被销毁了，不要互换顺序
      var option//定义图表配置
      
      //开始对组件进行匹配，匹配到哪一个就传哪一个的data
      switch(componentId) {
        case 1:
          var data1 = [120, 135, 150, 145, 160, 175, 180, 190, 205, 210, 220, 230];
          var xdata1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          option = getChartOption(data1,xdata1);//向柱状图函数传值
          break;
        case 2:
          var data2 = [
            { value: 80, name: '人事部' },
            { value: 60, name: '财务部' },
            { value: 50, name: '行政部' },
            { value: 120, name: '市场部' },
            { value: 150, name: '销售部' },
            { value: 90, name: '产品部' },
            { value: 200, name: '研发部' },
            { value: 30, name: '法务部' }
          ]
          option = getPieOption(data2)/向扇形图函数传值
          break;
         case 3:
          var data5 =  [8, 12, 10, 15, 9, 11, 14, 7, 13, 10, 9, 12];
          var xdata5 =  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          option = getLineOption(data5,xdata5);/向折线图函数传值
          break;
      }
      myChart.resize();//调整图表尺寸
      option && myChart.setOption(option);画表
    }

  }
    }

图表类型函数

这里的函数其实就是传一个option,完整的代码看Echarts官网echarts.apache.org/examples/zh... 然后导入相关的包和用到的条件，然后中间就看到有option[],没错把这段复制出来放到你的函数return{}中间，如下，然后把对应的data属性，作为传入的参数，在上面case匹配完定义对应数值调用函数并传值，就会返回一个完整的option[],这样就能直接把对应想要的图渲染出来了

js 复制代码

function getChartOption(data,xdata) {//柱状图
  return {
    xAxis: {
      type: 'category',
      data: xdata,//传入的数值这里只横坐标
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: data,  // 使用传入的data
        type: 'bar',
        label: {
          show: true,
          position: 'top',
        }
      }
    ]
  };
}

其它的图也是这个逻辑。。。

js 复制代码

//饼图
function getPieOption(data){
  return{
    tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
  }
}

js 复制代码

//折线图
function getLineOption(data,xdata){
  return{
      xAxis: {
    type: 'category',
    data: xdata
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data,
      type: 'line'
    }
  ]
  }
}