小程序开发中遇到的问题(6-2)-echarts异步加载数据

2018-07-11 09:57:39

echarts官网的的小程序的例子只举例了同步的数据,异步的数据,不知道该怎么弄了。 而且后台取回来的数据还需要处理才能渲染到图表上, 该什么设置呢。最近做了这个项目,也实现了功能

上一篇已经实现了了引入echarts, 但是我们做小程序不可能是静态数据, 渲染图表的数据,一般都是我们从后台领取后,才能进行处理和渲染。 显然,官网的例子,已经不能实现。那怎么实现

第一步 wxml 中添加代码

<view class="chart-box">
    <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas>
</view>

第二部,设置css。 这里需要设置chart-box和ec-canvas的高度, 否则渲染出来的图表是空白。既不报错,也不现实

.chart-box, ec-canvas{
    width: 100%;
    height: 500px;
}

第三部,就应该写js了

import Api from '../../../utils/config/api.js';
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();
Page({
  data: {
	items:{},
   
    ecBar: {
      lazyLoad: true // 延迟加载
    },
    ecScatter: {
      lazyLoad: true
    },   
   
  },
  onLoad: function () {
    var that = this;
    wx.showLoading();
    that.choseidata(); //请求数据
    //联运图
    that.barComponent = that.selectComponent('#mychart-dom-multi-bar');
    //ltv 图
    that.scaComponnet = that.selectComponent('#mychart-dom-multi-scatter');
  },

  init_bar: function (obj) { //联运图表
    this.barComponent.init((canvas, width, height) => {
      // 初始化图表
      const barChart = echarts.init(canvas, null, {
        width: 375,
        height: height
      });
      var option = this.chartinfo(obj); // chartinfo 是我处理后台请求数据后处理数据的函数
      barChart.setOption(option);
      return barChart;
    });
  },
  init_app: function (obj) { //app图表
    //app 图
    var that = this;
    that.ecComponent = that.selectComponent('#mychart-dom-bar');
    that.ecComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      var option = that.chartinfo(obj);
      chart.setOption(option);
      return chart;
    });
  }, 
  choseidata: function (val) {
    var that = this;    
    let _param = { //请求参数
      game_id: "",
      enddate: ""
    }
    Api.data_daily(_param).then(res => { //请求数据,这里是被自己封装过 wx.request
      if (rest.data.flag) {
            let _data = rest.data.data;
            that.init_bar(_data);
          }
    });
	
  },
  
  chartinfo: function (chartobj) {
    var lineColor = ['#ffc751', '#9692ff', '#419cf7', '#f4a264', '#26b99a', '#4162ff', '#ff6e72'];
    var legenddata = chartobj.legend, //标识
      datetime1 = chartobj.project, //横坐标
      charttitle = chartobj.text, //标题
      subtxt = chartobj.subtext, //副标题
      datalianyun = chartobj.data, //数据
      newchartdata = [];
    for (var key in datalianyun) { //修改json对象的属性名称
      var lxchartdata = {};
      lxchartdata.name = datalianyun[key]['title'];
      lxchartdata.type = 'line';
      lxchartdata.smooth = true;
      lxchartdata.data = datalianyun[key]['xData'].split(",");
      lxchartdata.itemStyle = { //设置颜色
        normal: {
          color: lineColor[key]
        }
      };
      if (key == '1' || key == '3') { //kpi完成情况
        lxchartdata.yAxisIndex = 1;
      }
      newchartdata.push(lxchartdata)
    }
    var option = this.drawchart(charttitle, subtxt, legenddata, datetime1, newchartdata);
    return option;
  },
  drawchart: function (title, subtxt, legenddata, time1, datass) { //联运图option
    var option = {
      title: {
        text: title,
        subtext: subtxt,
        top: 15,
        subtextStyle: {
          textAlign: 'center'
        },
        x: 'center',
        textStyle: {
          textAlign: 'center',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b} <br />{a0}: {c0}<br />{a1}: {c1}%<br />{a2}: {c2}<br />{a3}: {c3}%<br />{a4}: {c4}'
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      legend: {
        data: legenddata, //字段名字标识符
        top: 60,
        bottom: 10,
      },
      grid: {
        top: 130,
        left: 10,
        right: 10,
        bottom: 20,
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: time1, //x洲
        axisPointer: {
          type: 'shadow'
        }
      }],
      yAxis: [{
        type: 'value',
        name: '',
        min: 0,
        plitNumber: 5,
        splitLine: {
          show: true,
          //  改变轴线颜色
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#f2f2f2']
          }
        },
        axisLabel: {
          formatter: '{value}'
        }
      }, {
        type: 'value',
        // interval: 20,
        plitNumber: 5,
        splitLine: {
          show: true,
          //  改变轴线颜色
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#f2f2f2']
          }
        },
        axisLabel: {
          formatter: '{value}%'
        }
      }],
      series: datass //所有数据,json数组
    };
    return option;
  }, 

});


echarts在小程序中提示[sm]:72 Uncaught (in promise) TypeError: Cannot read property 'init' of null

这个提示,表示echart 没有获取到dom, 所以 一定要在that.selectComponent之前。

如果实在要实现选择性的加载, 可以用lazyload 进行处理

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO