echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新

微信小程序 Echarts 异步数据更新的练习，被坑了很多次，特作记录。

作者：罗兵

地址：https://www.cnblogs.com/hhh5460/p/9989805.html

0、效果图

               

1、视图

2、设置

//index.json

{

"usingComponents": {

"ec-canvas": "../../components/ec-canvas/ec-canvas"

}

}

3、样式

/**index.wxss**/

ec-canvas {

width: 100%;

height: 100%;

}

/**app.wxss**/

.container {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

box-sizing: border-box;

}

4、逻辑

/**index.js**/

// 载入组件

import * as echarts from '../../components/ec-canvas/echarts';

// 载入工具

//const util = require('../../utils/util.js')

// 全局变量

let chart = null;

let month = ['月', '月', '月', '月', '月', '月']; //月份

let evaporation = [0, 0, 0, 0, 0, 0]; //蒸发量

let precipitation = [0, 0, 0, 0, 0, 0]; //降水量

function initChart(canvas, width, height) {

chart = echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(chart);

chart.showLoading(); // 首次显示加载动画

var option = {

legend: {

data: ['蒸发量'