微信小程序ECharts通过调用api接口实现图表的数据可视化

小程序ECharts使用接口调入数据

• 首先附上js文件链接：axios.js
  提取码：AxIo
  将此放到小程序目录下的utils文件夹下
• 在已经完成图表的js文件中完成以下修改：

①引用axios.js

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

②写入接口代码

function initChart(canvas, width, height,dpr) {
  const url = '/admin/big_data/height_count';
  const body = {
    access_token: 'aaaa'
  }

url=’ ’ 是引入的接口，还有其他的接口
// 生长状况图 /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

③写入调用变量代码

axios.post(url,body).then((res)=>{
 ······
})

此过程需要把下面写的数据也剪切进来。在之中写入console.log(res.data)会把接口的数据打印出来，如果不行去检查一下是否未勾选不校验合法域名。

④自定义变量名(数组)，使用map方法映射新的数组调出数据。

let xAxis_data = res.data.map((item)=>{
    console.log(item.height)
    return item.height
    })

⑤option中相对应data中引用变量名就可以渲染出数据。

 xAxis: [
          {
              type: 'category',
              data: xAxis_data,
              axisTick: {
                  interval:0,
                  alignWithLabel: true,
                  show: false
              }
          }
        ],

• 整个js代码如下：

// pages/home/home.js
// 引用echarts
import * as echarts from '../../ec-canvas/echarts';
const axios = require('../../utils/axios.js');
function initChart(canvas, width, height,dpr) {
  const url = '/admin/big_data/height_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
    })
    let series_data = res.data.map((item)=>{
      console.log(item.count)
      return item.count
   })
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
      title:{
        text: '树高分别柱状图',
      },
      color: ['#428ff7'],
  
      tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: [
          {
              type: 'category',
              data: xAxis_data,
              axisTick: {
                  interval:0,
                  alignWithLabel: true,
                  show: false
              }
          }
      ],
      yAxis: [
          {
              type: 'value'
          }
      ],
      series: [
          {
              name: '树高',
              type: 'bar',
              barWidth: '50%',
              data: series_data
          }
      ]
  };
  chart.setOption(option);
  return chart;
  })


}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart,
    },
})

• 最后效果图