微信小程序ECharts通过调用api接口实现图表的数据可视化
2024-10-21 10:07:37
小程序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,
},
})
- 最后效果图
最新文章
- ios 开发之 Xcode6 No valid signing identities (i.e. certificate and private key pair) matching...
- 如何给ubuntu虚拟机添加硬盘和快捷键（转载）
- java中byte转换int时为何与0xff进行与运算
- jdk和jre是什么?都有什么用?（转帖）
- [置顶] 【Git入门之十四】Git GUI
- Android异步操作总结
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
- 201521123005 《java程序设计》 第七周学习总结
- 转-Gitorious搭建步骤
- hello2源代码解析
- CSS - !important声明强制优先
- nginx: [error] invalid PID number "" in "/usr/local/webserver/nginx/logs/nginx.pid" （原）
- Linux基础命令---显示文本look
- linux gcc编译多个源文件的方法
- ios之单例模式
- 鼠标滑动到指定位置时div固定在头部
- nodejs API（一）
- utf-8 转码--网址转码
- springboot集成activiti工作流时容易出现的问题
- 使用Xcode改动iOS项目project名和路径名