小程序中使用ECharts 异步加载数据

官网例子都是同步的,怎么引入及同步demo请移步官网

<view class="container">
  ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas="mychart-dom-multi-scatter"="mychart-multi-scatter"="{{ ecScatter }}">
</view>
import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    ecBar: {
      lazyLoad: true // 延迟加载
    },ecScatter: {
      lazyLoad: true 
    }
  },onLoad(){
    this.barComponent = this.selectComponent('#mychart-dom-multi-bar');
    this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter'this.init_bar();
    .init_sca();
  },init_bar: function (){
    this.barComponent.init((canvas,width,height) => {
       初始化图表
      const barChart = echarts.init(canvas,null,{
        width: width,height: height
      });
      barChart.setOption(.getBarOption());
       注意这里一定要返回 chart 实例,否则会影响事件处理等
      return barChart;
    });
  },init_sca:  () {
    this.scaComponnet.init((canvas,1)"> 初始化图表
      const scaChart = echarts.init(canvas,height: height
      });
      scaChart.setOption(.getScaOption());
       scaChart;
    });
  },getBarOption:(){
    return 请求数据
     {
      color: ['#37a2da','#32c5e9','#67e0e3'],tooltip: {
        trigger: 'axis' 坐标轴指示器,坐标轴触发有效
          type: 'shadow'         默认为直线,可选为:'line' | 'shadow'
        }
      },legend: {
        data: ['热度','正面','负面']
      },grid: {
        left: 2015
      },xAxis: [
        {
          type: 'value'
            }
          },axisLabel: {
            color: '#666'
          }
        }
      ],yAxis: [
        {
          type: 'category'false },data: ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎''bar''inside']
        },{
          name: '正面'120,102,141,174,190,250,220'left']
        }
      ]
    };
  },getScaOption:请求数据 
    var data = [];
    var data2 = [];

    for (var i = 0; i < 10; i++) {
      data.push(
        [
          Math.round(Math.random() * 100),Math.round(Math.random() * 100)
        ]
      );
      data2.push(
        [
          Math.round(Math.random() * 100)
        ]
      );
    }

    var axisCommon = {
      axisLabel: {
        textStyle: {
          color: '#C8C8C8'
        }
      },axisTick: {
        lineStyle: {
          color: '#fff''#C8C8C8'
        }
      }
    };

     {
      color: ["#FF7070","#60B6E3"'aaaa','bbbb'100]
        }
      },series: [{
        type: 'scatter''bbbb' (idx) {
        return idx * 50;
      },animationEasing: 'elasticOut'
    };
  },});

注意:异步加载时,ec-canvas标签加载显示要先于this.scaComponnet.init,否则会报错。

相关文章

概述 消息能力是小程序能力中的重要组成,我们为开发者提供了...
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...
微信小程序获取data-xx=&quot;&quot;属性的值,自定...