微信小程序中使用ECharts 异步加载数据的方法


            

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





<view class="container">

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

 <ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>

</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();

  this.init_sca();

 },

 init_bar: function (){

  this.barComponent.init((canvas, width, height) => {

   // 初始化图表

   const barChart = echarts.init(canvas, null, {

    width: width,

    height: height

   });

   barChart.setOption(this.getBarOption());

   // 注意这里一定要返回 chart 实例，否则会影响事件处理等

   return barChart;

  });

 },

 init_sca: function () {

  this.scaComponnet.init((canvas, width, height) => {

   // 初始化图表

   const scaChart = echarts.init(canvas, null, {

    width: width,

    height: height

   });

   scaChart.setOption(this.getScaOption());

   // 注意这里一定要返回 chart 实例，否则会影响事件处理等

   return scaChart;

  });

 },

 getBarOption:function(){

  //return 请求数据

  return {

   color: ['#37a2da', '#32c5e9', '#67e0e3'],

   tooltip: {

    trigger: 'axis',

    axisPointer: {      // 坐标轴指示器，坐标轴触发有效

     type: 'shadow'    // 默认为直线，可选为：'line' | 'shadow'

    }

   },

   legend: {

    data: ['热度', '正面', '负面']

   },

   grid: {

    left: 20,

    right: 20,

    bottom: 15,

    top: 40,

    containLabel: true

   },

   xAxis: [

    {

     type: 'value',

     axisLine: {

      lineStyle: {

       color: '#999'

      }

     },

     axisLabel: {

      color: '#666'

     }

    }

   ],

   yAxis: [

    {

     type: 'category',

     axisTick: { show: false },

     data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],

     axisLine: {

      lineStyle: {

       color: '#999'

      }

     },

     axisLabel: {

      color: '#666'

     }

    }

   ],

   series: [

    {

     name: '热度',

     type: 'bar',

     label: {

      normal: {

       show: true,

       position: 'inside'

      }

     },

     data: [300, 270, 340, 344, 300, 320, 310]

    },

    {

     name: '正面',

     type: 'bar',

     stack: '总量',

     label: {

      normal: {

       show: true

      }

     },

     data: [120, 102, 141, 174, 190, 250, 220]

    },

    {

     name: '负面',

     type: 'bar',

     stack: '总量',

     label: {

      normal: {

       show: true,

       position: 'left'

      }

     },

     data: [-20, -32, -21, -34, -90, -130, -110]

    }

   ]

  };

 },

 getScaOption:function(){

  //请求数据 

  var data = [];

  var data2 = [];

  for (var i = 0; i < 10; i++) {

   data.push(

    [

     Math.round(Math.random() * 100),

     Math.round(Math.random() * 100),

     Math.round(Math.random() * 40)

    ]

   );

   data2.push(

    [

     Math.round(Math.random() * 100),

     Math.round(Math.random() * 100),

     Math.round(Math.random() * 100)

    ]

   );

  }

  var axisCommon = {

   axisLabel: {

    textStyle: {

     color: '#C8C8C8'

    }

   },

   axisTick: {

    lineStyle: {

     color: '#fff'

    }

   },

   axisLine: {

    lineStyle: {

     color: '#C8C8C8'

    }

   },

   splitLine: {

    lineStyle: {

     color: '#C8C8C8',

     type: 'solid'

    }

   }

  };

  return {

   color: ["#FF7070", "#60B6E3"],

   backgroundColor: '#eee',

   xAxis: axisCommon,

   yAxis: axisCommon,

   legend: {

    data: ['aaaa', 'bbbb']

   },

   visualMap: {

    show: false,

    max: 100,

    inRange: {

     symbolSize: [20, 70]

    }

   },

   series: [{

    type: 'scatter',

    name: 'aaaa',

    data: data

   },

   {

    name: 'bbbb',

    type: 'scatter',

    data: data2

   }

   ],

   animationDelay: function (idx) {

    return idx * 50;

   },

   animationEasing: 'elasticOut'

  };

 },

});



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

总结

以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！