we_view_app/miniprogram/pages/index/index.js

import * as echarts from '../../ec-canvas/echarts';
import {
  getToDayChartOpt
} from './today-chart-opt.js';
import {
  getSourceChartOpt
} from './source-chart-opt.js';

//模拟toDay数据
let toDayAata = {
  dayTime: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
  visitorNum: [17, 6, 12, 7, 9, 12, 19, 8, 14, 15, 17, 8, 18],
  clickNum: [7, 19, 5, 15, 6, 11, 17, 14, 12, 16, 9, 11, 14]
}

Page({
  data: {
    //今日浏览统计chart type
    toDayChartType: 'line', //line | bar
    //今日浏览统计 chart
    todayEc: {
      lazyLoad: true,
      isLoaded: false
    },
    //访客来源 chart
    sourceEc: {
      lazyLoad: true,
      isLoaded: false
    }
  },

  //今日浏览统计 chart切换
  switchToDayChartType: function() {
    if (this.data.toDayChartType === 'line') {
      this.setData({
        toDayChartType: 'bar',
      })
    } else {
      this.setData({
        toDayChartType: 'line',
      })
    }

    if (this.toDayChart) {
      this.toDayChart.setOption(getToDayChartOpt(toDayAata,this.data.toDayChartType))
    }
  },

  //init 今日浏览统计 chart
  initToDayChart: function() {
    this.toDayComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      chart.setOption(getToDayChartOpt(toDayAata, this.data.toDayChartType));

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.toDayChart = chart;

      this.setData({
        isLoaded: true,
        isDisposed: false
      });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },

  //init 访客来源 chart
  initSourceChart: function () {
    this.sourceComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      chart.setOption(getSourceChartOpt([100,500,450]));

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.sourceDayChart = chart;

      this.setData({
        isLoaded: true,
        isDisposed: false
      });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },

  onReady() {
    this.toDayComponent = this.selectComponent('#today-chart');
    this.sourceComponent = this.selectComponent('#source-chart');
    
    //模拟异步
    setTimeout(()=>{
      this.initToDayChart();
      this.initSourceChart();
    },300)
  }
});