微信小程序 使用ec-canvas 在开发者工具中正常渲染 发布体验版和上线 会闪退；很奇怪的是 前三个图形可以正常渲染出来 到第四个就会闪退
wxml中代码
<wxs module="filters" src="../../filters/filters.wxs"></wxs>
<!-- 主体 -->
<!-- 设备故障汇总 - 图表区域 第四个图表 === 设备故障汇总 -->
<view style="width: 100vw; height: 380rpx;" class="equipmentStarts">
<ec-canvas type="2d" ec="{{ ec4 }}" id="faultSummary"></ec-canvas>
</view>
js中代码
// pages/overview/overview.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
Page({
data: {
ec4: { lazyLoad: true }, // 图表懒加载
},
onLoad: function (options) {
// this.faultSummary = this.selectComponent('#faultSummary') // 第四个图表 === 设备故障汇总
},
// 自定义
// 获取 概览 数据统计 - 页面数据
async getHomeData(name) {
const { code, data } = await app.home.getHomeData(this.data.formData)
console.log('res=============', data)
if (code === 0) {
// 第四个图表 === 设备故障汇总
console.log('data.faultLightHis.topLightHisList---------', data.faultLightHis.topLightHisList)
if (data.faultLightHis.topLightHisList && data.faultLightHis.topLightHisList.length > 0) {
const xData = []
const yData = []
data.faultLightHis.topLightHisList.forEach(item => {
yData.push(item.hours) // 故障时间
xData.push(item.equipmentName) // 设备名称
})
setTimeout(() => {
this.initFaultSummary(xData, yData) // 第四个图表 === 设备故障汇总
}, 3000)
}
},
// 第四个图表 === 设备故障汇总
initFaultSummary(xData, yData) {
console.log('xData, yData****', xData, yData)
this.selectComponent('#faultSummary').init((canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr });
faultSummary(chart, xData, yData)
return chart
})
},
})
// 不在 页面生命周期中的 自定义函数
// 第四个图表 === 设备故障汇总
function faultSummary(chart, xData, yData) {
console.log('xData, yData第四个接受之======', xData, yData)
var option = {
grid: {
top: '18%',
left: '10%',
right: '7%',
bottom: '15%'
},
xAxis: {
gridIndex: 0,
type: 'category',
axisLabel: { color: '#272A35' },
data: xData,
axisLine: { lineStyle: { color: '#2A3560' } },
triggerEvent: true
},
yAxis: {
name: '时长(h)',
type: 'value',
min: 0,
minInterval: 25,
nameTextStyle: { fontSize: 12, color: '#737996' },
splitLine: { show: false },
axisLine: { lineStyle: { color: '#2A3560' } },
axisLabel: { color: '#6A718F' }
},
series: [{
name: '时长',
data: yData,
type: 'bar',
barWidth: 20,
label: { show: true, position: 'top', formatter: '{c}h', color: "#000 " },
itemStyle: { color: "#FC4F50" }
}]
}
chart.setOption(option);
return chart
}
强力驱动