收藏
回答

自定义组件里个Echarts不行?直接报错没有setOption

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

let app = getApp()
var barec = null
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btText: {
      value: '默认值',
      type: String
    }
  },
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦!',
      path: '/pages/SysComponent/jixiao',
      success: function () {},
      fail: function () {}
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    date: '请选择>', //默认起始时间  
    date2: '请选择>', //默认起始时间  
    listArr: [],
    //barec:null,
    windowHeight: '', //屏幕高度 
    scrollTop: 0, //设置srcoll-view距离顶部位置
    ec: {

    }

  },

  /**
   * 组件的方法列表
   */
  methods: {
    showLog: function () {
      var that=this;
      var widhegth = wx.getSystemInfoSync().windowHeight;
      var listboxCount = parseInt(widhegth / 30);
      that.setData({
        windowHeight: widhegth,
        pageSize: listboxCount,
        ec:{
          onInit: function (canvas, width, height) {
            barec = echarts.init(canvas, null, {
              width: width,
              height: height
            });
            canvas.setChart(barec);
            return barec;
          }
        }
      })

      var animation = wx.createAnimation({
        duration: 1000,
        timingFunction: "ease",
        delay: 0
      })
      animation.translateY(5).step();
      that.setData({
        animationData: animation.export()
      })
      that.getData()
    },
    onReady() {
      setTimeout(this.getData, 500);
    },

    getData() {
      var that=this;
      wx.showLoading({
        title: '加载中...',
      })
 
          barec.setOption({
              grid: {
                left: '3%',
                right: '7%',
                bottom: '3%',
                containLabel: true
              },
              tooltip: {
                // trigger: 'axis',
                showDelay: 0,
                formatter: function (params) {
                  if (params.value.length > 1) {
                    console.log(params)
                    return params.seriesName + ' :' +
                      params.value[0] + '个 ' +
                      params.value[1] + 'm ';
                  } else {
                    return params.name + ' :' +
                      params.seriesName + ' : ' +
                      params.value;
                  }
                },
                axisPointer: {
                  show: true,
                  type: 'cross',
                  lineStyle: {
                    type: 'dashed',
                    width: 1
                  }
                }
              },
              color: ["#37A2DA", "#67E0E3"],
              legend: {
                data: ['个数', '次数'],
                top: 20,
                left: 'center',
                backgroundColor: '#FFFFFF',
                z: 100
              },
              xAxis: {
                x: 'center',
                type: 'value',
                splitLine: {
                  lineStyle: {
                    type: 'dashed'
                  }
                }
                // show: false
              },
              yAxis: {
                type: 'category',
                boundaryGap: false,
                data: ["", "测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9", "测试10", "测试11", "测试12", "测试13", "测试14", "测试15", "测试16", "测试17", "测试18", "测试19", "测试20", "测试21", "王富贵", "测试22", "测试23", "测试24", "测试25", "测试26", "测试27", ""], //
                // show: false
  
              },
              series: [{
                name: '个数',
                type: 'bar',
                smooth: true,
                data: EntNumber//[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0] //
              }, {
                name: '次数',
                type: 'bar',
                smooth: true,
                data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 19, 0] //
              }]
            },

            wx.hideLoading())
        },
        fail: function (res) {},
        complete: function (res) {},
      })
    }
  }
})

大佬们,帮忙看一下哪里出问题了呗,如果需要我看什么东西就能了解的话,告知一下我需要看哪里,谢谢大佬们了

回答关注问题邀请回答
收藏

5 个回答

  • 涛声依旧
    涛声依旧
    03-12

    我在自定义组件中用 echarts 也遇到了这个问题,你解决了吗?

    03-12
    有用
    回复
  • 周承昊
    周承昊
    2021-09-08

    看错误提示:对象是null。


    2021-09-08
    有用
    回复
  • 小卒过河〰
    小卒过河〰
    发表于小程序端
    2020-08-07
    barec对象在你调用方法时为null 得在调用之前为它初始化,建议利用断点调试
    2020-08-07
    有用
    回复
  • 睡前原谅一切
    睡前原谅一切
    2020-08-07

    来 把它搞成代码片段:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-08-07
    有用
    回复
  • 微喵网络
    微喵网络
    2020-08-07

    异步的问题

    2020-08-07
    有用
    回复 2
    • 齁儿
      齁儿
      2020-08-07
      大佬怎么搞呀
      2020-08-07
      回复
    • 微喵网络
      微喵网络
      2020-08-07回复齁儿
      把 that.getData() 放到 barec = echarts.init(...)后面
      2020-08-07
      回复
登录 后发表内容
问题标签