Verwenden Sie ECharts, um Daten asynchron im Miniprogramm zu laden

Dieser Artikel stellt hauptsächlich das asynchrone Laden von Daten mit ECharts in kleinen Programmen vor. Jetzt kann ich ihn mit Ihnen teilen.

Die offiziellen Website-Beispiele sind synchron. Informationen zum Einführen und Synchronisieren der Demo finden Sie auf der offiziellen Website

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

Hinweis: Beim asynchronen Laden muss das ec-canvas-Tag vor this.scaComponnet geladen und angezeigt werden. init, andernfalls wird ein Fehler 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 das Problem der Breite:100 % Ausfall des Echarts-Diagramms auf der Registerkartenseite

Das obige ist der detaillierte Inhalt vonVerwenden Sie ECharts, um Daten asynchron im Miniprogramm zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!