小程序 引入 es-canvas wx:for 单页面渲染多个for不同数据

<block wx:for="{{list}}" wx:key="sbh">
  <view style="height: 400px;width: 100%;">
    <ec-canvas id="charts-{{item.sbh}}" canvas-id="charts-{{item.sbh}}" ec="{{ ec }}"></ec-canvas>
  </view>
</block>

　　

// pages/device/index.js
import * as echarts from '../components/ec-canvas/echarts';

var clearCharts = true;
//图表容器
let data=[
  {
    "type": "identifier",
    "list": [
      {
        "date": "2020/8/1",
        "num": 10
      },
      {
        "date": "2020/8/2",
        "num": 20
      },
      {
        "date": "2020/8/3",
        "num": 30
      }
    ]
  },
  {
    "type": "Overpressure",
    "list": [
      {
        "date": "2020/8/2",
        "num": 10
      },
      {
        "date": "2020/8/2",
        "num": 20
      },
      {
        "date": "2020/8/3",
        "num": 30
      }
    ]
  }
]
/**
 * 初始化图表
 * @param {*} canvas 
 * @param {*} width 
 * @param {*} height 
 * @param {*} dpr 
 */



Page({
  data: {
    list: [],
    data:data,
  }, 
  onLoad: function () {
    this.loadData();
  },
  loadData: function(){
    var that = this;
    var list = [];
    for(var i=0;i<6;i++){
      var num = uuid();
      list.push({'sbh':num});
    }
    that.setData({
      list: list
    })
    var arr=[]
    let xData=[]
    for(var i=0;i<list.length;i++){
      arr.push(this.selectComponent('#charts-'+list[i].sbh+''))
    }
    let datas=this.data.data;
    datas.forEach((aa,index)=>{
        xData.push(aa.list.map(item=>[item.date,item.num]))
      })
      console.log(xData)
    
    arr.forEach((item,index)=>{
        console.log(item,index)
        item.init((canvas, width, height, dpr) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          chart.setOption(getOption('111',xData[index]))
          // setOption(chart);
          // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
          this.chart = chart;
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });
    })
  },


})

//图表配置项

function getOption(title,xData) {
  var option = {
    title: {
      text: '属性：'+title,
      left: 'center'
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel:{
        interval:0,
        rotate:40
      }
  },
  yAxis: {
      type: 'value',
      boundaryGap: [0, '30%']
  },
  series: [
      {
          type: 'line',
          data:xData
      }
  ]
  };
  return option
}
function uuid() {
  var s = [];
  var hexDigits = "0123456789abcdef";
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "-";
 
  var uuid = s.join("");
  return uuid
}

　　

.canvas{
  width: 100%;
  height: 100%;
}
.mychart{
  width: 100%;
  height: 800rpx;
  box-sizing: border-box;

}