So verwenden Sie ECharts zum asynchronen Laden von Daten im WeChat-Applet-Mini-Programmentwicklung-php.cn

So verwenden Sie ECharts zum asynchronen Laden von Daten im WeChat-Applet

不言

Freigeben： 2018-06-27 15:19:18

Original

4360 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zum asynchronen Laden von Daten im WeChat-Applet vorgestellt. Sie ist sehr gut und hat einen gewissen Referenzwert.

Offizielle Website-Beispiele sind alle synchron . Informationen zum Einführen und Synchronisieren der Demo finden Sie auf der offiziellen 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>

Nach dem Login kopieren

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;
  };
 },
});

Nach dem Login kopieren

Hinweis: Beim asynchronen Laden muss die Anzeige des ec-canvas-Tag-Ladens vor this.scaComponnet.init stehen, andernfalls wird ein Fehler angezeigt gemeldet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Analyse von Sprungparametern und Objekten in WeChat Mini-Programmen

WeChat Mini Program Calling SDKs asynchrone Benachrichtigungs- und Verifizierungsauftragsmethode nach der Zahlung

Über die asynchrone Verarbeitung des WeChat-Applets

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ECharts zum asynchronen Laden von Daten im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!