微信小程序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,
    },
})

• 最后效果圖