Comment utiliser ECharts pour charger des données de manière asynchrone dans l'applet WeChat-Développement de mini-programmes-php.cn

Comment utiliser ECharts pour charger des données de manière asynchrone dans l'applet WeChat

不言

Libérer： 2018-06-27 15:19:18

original

4315 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation d'ECharts pour charger des données de manière asynchrone dans l'applet WeChat. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Les exemples de sites Web officiels sont tous synchrones. .Comment présenter et synchroniser la démo, veuillez vous rendre sur le site officiel

<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>

Copier après la connexion

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

Copier après la connexion

Remarque : lors du chargement de manière asynchrone, la balise ec-canvas doit être chargée et affichée avant this.scaComponnet. .init, sinon une erreur sera signalée.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse des paramètres et des objets de saut dans les mini-programmes WeChat

Le mini-programme WeChat appelant les SDK méthode de notification asynchrone et de vérification de la commande après le paiement

À propos du traitement asynchrone de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!