小程序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,
},
})
- 最后效果图