Use ECharts to load data asynchronously in the mini program

This article mainly introduces the asynchronous loading of data using ECharts in small programs. It has certain reference value. Now I share it with you. Friends in need can refer to it.

The official website examples are all synchronous. How to introduce and synchronize the demo please go to the official 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;
    };
  },
});

Note: When loading asynchronously, the ec-canvas tag loading and display must precede 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 problem of width:100% failure of echarts chart on tab page

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