<block wx:for="{{list}}" wx:key="sbh"> <view style="height: 400px; 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, 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{ 100%; height: 100%; } .mychart{ 100%; height: 800rpx; box-sizing: border-box; }