How to use ECharts to load data asynchronously in WeChat applet-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

How to use ECharts to load data asynchronously in WeChat applet

不言

Jun 27, 2018 pm 03:19 PM

echartsAsynchronous loadingWeChat applet

This article mainly introduces the method of using ECharts to load data asynchronously in the WeChat applet. It is very good and has certain reference value. Friends in need can refer to the

official website examples are all synchronous. For how to introduce and synchronize the demo, please go to the official website

<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 &#39;../../ec-canvas/echarts&#39;;
Page({
 data: {
  ecBar: {
   lazyLoad: true // 延迟加载
  },
  ecScatter: {
   lazyLoad: true 
  }
 },
 onLoad(){
  this.barComponent = this.selectComponent(&#39;#mychart-dom-multi-bar&#39;);
  this.scaComponnet = this.selectComponent(&#39;#mychart-dom-multi-scatter&#39;);
  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: [&#39;#37a2da&#39;, &#39;#32c5e9&#39;, &#39;#67e0e3&#39;],
   tooltip: {
    trigger: &#39;axis&#39;,
    axisPointer: {      // 坐标轴指示器，坐标轴触发有效
     type: &#39;shadow&#39;    // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
    }
   },
   legend: {
    data: [&#39;热度&#39;, &#39;正面&#39;, &#39;负面&#39;]
   },
   grid: {
    left: 20,
    right: 20,
    bottom: 15,
    top: 40,
    containLabel: true
   },
   xAxis: [
    {
     type: &#39;value&#39;,
     axisLine: {
      lineStyle: {
       color: &#39;#999&#39;
      }
     },
     axisLabel: {
      color: &#39;#666&#39;
     }
    }
   ],
   yAxis: [
    {
     type: &#39;category&#39;,
     axisTick: { show: false },
     data: [&#39;汽车之家&#39;, &#39;今日头条&#39;, &#39;百度贴吧&#39;, &#39;一点资讯&#39;, &#39;微信&#39;, &#39;微博&#39;, &#39;知乎&#39;],
     axisLine: {
      lineStyle: {
       color: &#39;#999&#39;
      }
     },
     axisLabel: {
      color: &#39;#666&#39;
     }
    }
   ],
   series: [
    {
     name: &#39;热度&#39;,
     type: &#39;bar&#39;,
     label: {
      normal: {
       show: true,
       position: &#39;inside&#39;
      }
     },
     data: [300, 270, 340, 344, 300, 320, 310]
    },
    {
     name: &#39;正面&#39;,
     type: &#39;bar&#39;,
     stack: &#39;总量&#39;,
     label: {
      normal: {
       show: true
      }
     },
     data: [120, 102, 141, 174, 190, 250, 220]
    },
    {
     name: &#39;负面&#39;,
     type: &#39;bar&#39;,
     stack: &#39;总量&#39;,
     label: {
      normal: {
       show: true,
       position: &#39;left&#39;
      }
     },
     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: &#39;#C8C8C8&#39;
    }
   },
   axisTick: {
    lineStyle: {
     color: &#39;#fff&#39;
    }
   },
   axisLine: {
    lineStyle: {
     color: &#39;#C8C8C8&#39;
    }
   },
   splitLine: {
    lineStyle: {
     color: &#39;#C8C8C8&#39;,
     type: &#39;solid&#39;
    }
   }
  };
  return {
   color: ["#FF7070", "#60B6E3"],
   backgroundColor: &#39;#eee&#39;,
   xAxis: axisCommon,
   yAxis: axisCommon,
   legend: {
    data: [&#39;aaaa&#39;, &#39;bbbb&#39;]
   },
   visualMap: {
    show: false,
    max: 100,
    inRange: {
     symbolSize: [20, 70]
    }
   },
   series: [{
    type: &#39;scatter&#39;,
    name: &#39;aaaa&#39;,
    data: data
   },
   {
    name: &#39;bbbb&#39;,
    type: &#39;scatter&#39;,
    data: data2
   }
   ],
   animationDelay: function (idx) {
    return idx * 50;
   },
   animationEasing: &#39;elasticOut&#39;
  };
 },
});

Note: When loading asynchronously, the ec-canvas tag must be loaded and displayed before this.scaComponnet.init, otherwise an error will be reported.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the analysis of jump parameters and objects in WeChat Mini Program

WeChat Mini Program Calling the SDK’s asynchronous notification and verification order method after payment

About asynchronous processing of WeChat mini programs

The above is the detailed content of How to use ECharts to load data asynchronously in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn