微信小程序循环显示多个Echarts图表，动态渲染数据

需求：需要在微信小程序中循环显示多个Echarts图表，动态渲染Echarts数据。

经查询，选择使用echarts插件。

在echarts官网中获取ec-canvas组件，放入至微信小程序中

1、wxml：在标签中把数据通过父传子的方式传过去，子组件接收

<view wx:for="{{tabContent}}" wx:key="studentId">
      <!-- 上线用 -->
      <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" tuData="{{item.echartsData}}" ec="{{ ec }}"></ec-canvas>
      <!-- 真机调试 -->
      <!-- <ec-canvas id="mychart-dom-line" force-use-old-canvas="true" canvas-id="mychart-line" tuData="{{item.echartsData}}" ec="{{ ec }}"></ec-canvas> -->
</view>

2、js：获取数据时，通过map方法改造数据，把Echarts需要的数据组合成数组

// 获取老师课程
import {
  getCourse
} from '../../../request/course'

import * as echarts from '../../../ec-canvas/echarts';

const app = getApp();


//获取像素比
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}
// console.log(pixelRatio)
let dpr = getPixelRatio()

function initChart(canvas, width, height, echartsData) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
  });
  canvas.setChart(chart);
  var color = ["#09BB07", "#09BB07", "#FF5343", "#F57325", "#F57325", "#1D79FB", "#F57325"]
  var option = {
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //   }
    // },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      data: ['正常签到', '代签到', '旷课', '迟到', '早退', '请假', '迟到早退'],
      axisLabel: {
        width: 20,
        interval: 0,
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      }
    },

    series: [{
      itemStyle: {
        color: function (p) {
          return color[p.dataIndex]
        }
      },
      barWidth: '30%',
      fontSize: 10,
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      data: echartsData,
      type: 'bar'
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 图表
    ec: {
      onInit: initChart,
    },
  },
  // 获取学生签到统计
  async getStudentSignCountList(data) {
    wx.showLoading({
      title: 'Loading',
      mask: true
    })
      let res = await getStudentSignCount(data)
      // console.log(res);
      if (res.data.status == '10000') {
       // 通过map改造数据，把Echarts需要的数据组合成数组
        let arr = res.data.data.data.map(item => {
          return {
            ...item,
            echartsData: [item.normalCount, item.manualCount, item.absenteeCount, item.lateCount, item.earlyCount, item.leaveCount, item.lateandleaveCount]
          }
        })
        this.setData({
          tabContent: [...this.data.tabContent, ...arr],
          pagecount: res.data.data.pagecount,
          totalcount: res.data.data.totalcount
        })
      }
      if (res.data.status == "10105") {
        this.setData({
          tabContent: [],
          totalcount: res.data.data.totalcount,
          showMore: false
        })
      }
  }
})

3、下载的echart包中的ec-canvas.js需要加一个参数

在调用onInit方法中传入数据
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, this.data.tuData)

  properties: {
    canvasId: {
      type: String,
      value: 'ec-canvas'
    },

    ec: {
      type: Object
    },
    tuData:{//这是新增的参数
      type: Object
    },
    forceUseOldCanvas: {
      type: Boolean,
      value: false
    }
  },

    initByOldWay(callback) {
      // 1.9.91 <= version < 2.9.0：原来的方式初始化
      ctx = wx.createCanvasContext(this.data.canvasId, this);
      const canvas = new WxCanvas(ctx, this.data.canvasId, false);

      echarts.setCanvasCreator(() => {
        return canvas;
      });
      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
      const canvasDpr = 1
      var query = wx.createSelectorQuery().in(this);
      query.select('.ec-canvas').boundingClientRect(res => {
        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height, canvasDpr);
        }
        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
          // 在调用onInit方法中传入数据
          this.chart = this.data.ec.onInit(canvas, res.width, res.height, this.data.tuData);
        }
        else {
          this.triggerEvent('init', {
            canvas: canvas,
            width: res.width,
            height: res.height,
            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
          });
        }
      }).exec();
    },

    initByNewWay(callback) {
      // version >= 2.9.0：使用新的方式初始化
      const query = wx.createSelectorQuery().in(this)
      query
        .select('.ec-canvas')
        .fields({ node: true, size: true })
        .exec(res => {
          const canvasNode = res[0].node
          this.canvasNode = canvasNode

          const canvasDpr = wx.getSystemInfoSync().pixelRatio
          const canvasWidth = res[0].width
          const canvasHeight = res[0].height

          const ctx = canvasNode.getContext('2d')

          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
          echarts.setCanvasCreator(() => {
            return canvas
          })

          if (typeof callback === 'function') {
            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
            // 在调用onInit方法中传入数据
            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, this.data.tuData)
          } else {
            this.triggerEvent('init', {
              canvas: canvas,
              width: canvasWidth,
              height: canvasHeight,
              dpr: canvasDpr
            })
          }
        })
    },