微信小程序使用echarts图表

异步加载调接口请点这里https://www.jianshu.com/p/3fd0f52a2d93

一、下载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，并给个默认柱状图测试

import * as echarts from '../../ec-canvas/echarts';
Page({
  data: {
    chartBar: {//图表柱状图表
        onInit: ''
    },
    chartData:{
      title: { 
        text: "近7日接诊趋势图：单位(人)",
        textStyle:{color:'#333',fontWeight:'bold',fontSize:14} 
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          color: '#ffc300'
      }]
    }
  },
  onLoad: function (options) {
       this.getList()
  },
  getList(){
    var that = this;
    var chartBar = 'chartBar.onInit';
    that.setData({
        [chartBar]: that.initCharts,
    })
  },
   //图表结果
   initCharts(canvas, width, height) {
    var chartData = this.data.chartData;
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(chart);
    var option=chartData
    chart.setOption(option);
    return chart;
   }
})

显示结果如下

image.png