微信小程序使用echarts图表异步加载数据（调接口显示返回数据）

静态图表测试请点这里https://www.jianshu.com/p/8ae97f4ae7dc

一、下载echarts微信版

链接：https://pan.baidu.com/s/1W5Z-QWm1gNJGw9oX5CltDQ
提取码：vb0i

二、将下载好的文件中 ec-canvas目录 放在小程序项目目录中即可

我是跟pages放在了同级

image.png

三、使用

建立cc文件夹（cc.js、cc.json、cc.wxml、cc.wxss）

1、使用echarts

如：在 page目录的cc页面中使用echarts的话，需要在cc.json中添加以下配置。

{
  "usingComponents": {"ec-canvas":"../../ec-canvas/ec-canvas"}
}

2、cc.wxml

3、cc.wxss

.wx-canvas {
  position: relative;
  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、在 cc.js 中引入echarts.js，并给个默认柱状图测试

const app = getApp()
import api from '../../api/api.js';
import * as echarts from '../../ec-canvas/echarts';
var barec = null
Page({
  data: {
    chartBar: {//图表
      onInit: function (canvas, width, height) {
        barec = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barec);
        return barec;
      }
    }
  },
  onLoad: function (options) {
     this.getchartData()
  },
  getchartData(){
    var that=this
    var db = {}//请求参数
  //  url接口，名字  
   api.post(api.urlList.url, 'POST', db).then(res => {
       if (res.code == 1) {
        //  返回数据赋值
        barec.setOption({
           title: { 
              text: "近7日接诊趋势图：单位(人)",
              textStyle:{color:'#333',fontWeight:'bold',fontSize:14,} 
              },
              legend: {show: true,top:"20rpx"},
              tooltip: {},
              dataset: {
                  source: [
                      ['', '线下', '电话'],
                      ['Matcha Latte', 43.3, 85.8],
                      ['Milk Tea', 83.1, 73.4]
                  ]
              },
              xAxis: {type: 'category'},
              yAxis: {},
              series: [
                  {type: 'bar',color: '#ffc300'},
                  {type: 'bar'}
              ]
        })
       } 
   }).catch(err => {})
 }
})

显示结果如下

image.png