Echarts通过调取接口获取数据来显示

Echarts通过调取接口获取数据来显示
1.将写好的组件复制到所需要的小程序中（这里以我自己使用的文件axios.js为例，我把它放进了utils目录中)

const baseURL = 'https://api.inno-we.cn:10001';//接口地址
module.exports = {
  post: function(url,body){
    return new Promise((callBack, reject)=>{
      wx.request({
        url: baseURL + url,
        method:'POST',
        data: body,//传给后台的变量及对应值
        success:(res)=>{
          const r = res.data;
          callBack(r);
        },
        fail:(e)=>{
          reject(e);
        }
      })
    })
  },
  postWithToken: function (url, body = {}){
    body.access_token = wx.getStorageSync('access_token');
    // body.access_token = "aaaa";
    return new Promise((callBack, reject) => {
      wx.request({
        url: baseURL + url,
        method: 'POST',
        data: body,
        success: (res) => {
          const r = res.data;
          callBack(r);
        },
        fail: (e) => {
          reject(e);
        }
      })
    })
  },
  uploadFile: function(url, body, filePath){
    body.access_token = wx.getStorageSync('access_token');
    return new Promise((callBack, reject) => {
      wx.uploadFile({
        url: baseURL + url,
        filePath,
        name: 'file',  
        formData: body,
        success(res) {
          callBack(res);
        },
        fail:(res)=>{
          reject(res)
        }
      })
    });
  },
  uploadFiles: function(url, body,files){
    const tasks = files.map((file)=>{
      return this.uploadFile(url,body,file);
    });
    return Promise.all(tasks); 
  },
  
}

2.在所使用echarts的js页面引入axios.js（使用require方法）我定义为axios

const axios=require("../../utils/axios.js");

3.定义axios.js中的两个参数url、body，将请求放入到axios中（写在刚开始Echarts定义的函数中）

const url='/admin/big_data/height_count';//树高分类柱状图接口
  const body = {
    access_token: 'aaaa'
  }
  axios.post(url,body).then((res)=>{
    console.log(res.data);

4.把option放入axios中 使用map遍历数组获取你所需要的数据（js页面完整代码）：

import * as echarts from '../../ec-canvas/echarts' 
const axios = require('../../utils/axios.js');
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
    
  });
  canvas.setChart(chart);
  const url='/admin/big_data/height_count';  
  	// 生长状况图   /admin/big_data/health_count1
    // 养护频率图   /admin/big_data/maintenances_count
    // 树高分别柱状图   /admin/big_data/height_count
    // 树种分类     /admin/big_data/tree_name_count1
    // 湿度曲线   /admin/big_data/humidity_count
    // 空气质量曲线   /admin/big_data/aqi_count
  const body = {
    access_token: 'aaaa'
  }
  axios.post(url,body).then((res)=>{
    console.log(res.data);
    let xAxis_data=res.data.map((item)=>{
      console.log(item.height);
      return item.height;
    })
    console.log(xAxis_data)
    let series_data=res.data.map((item)=>{
      console.log(item.count);
      return item.count;
    })
    console.log(series_data)
    var option = {
    title: {
      text: '树高分类柱状图',

  },
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',   
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisLabel: {    
              interval: 0,   
              rotate: 90,
      
             },
            data:xAxis_data,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            // name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: series_data
        }
    ]
  };
   chart.setOption(option);
  return chart;
  })
}

还有最后重要的一点！！！！
在使用接口时一定要配置好小程序！！！！右上角详情-----本地设置-------不校验合法域名