收藏
回答

微信小程序 使用ec-canvas 在开发者工具中正常渲染 发布体验版和上线 会闪退?

微信小程序 使用ec-canvas 在开发者工具中正常渲染 发布体验版和上线 会闪退;很奇怪的是 前三个图形可以正常渲染出来 到第四个就会闪退

wxml中代码

<wxs module="filterssrc="../../filters/filters.wxs"></wxs>

<!-- 主体 -->

<!-- 设备故障汇总 - 图表区域 第四个图表 === 设备故障汇总 -->

<view style="width: 100vw; height: 380rpx;class="equipmentStarts">

  <ec-canvas type="2dec="{{ 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

}


回答关注问题邀请回答
收藏
登录 后发表内容
问题标签