微信小程序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,
},
})
- 最后效果图
微信小程序ECharts通过调用api接口实现图表的数据可视化的更多相关文章
- (一)微信小程序之模拟调用后台接口踩过的坑
如下图标记的三个点 在调试过程中出现问题,特此记录. 1. 之前在浏览器测试接口习惯省略 http:// ,是因为浏览器默认有一个检测,在你输入的网址前面加http://,如果有就不加. 然而在微信小 ...
- 微信小程序 带参调用后台接口 循环渲染页面 wx.request wx:for
test.js 文件里的onLoad function getarticles(p,order,mythis) { wx.request({ url: 'https://ganggouo.cn/ind ...
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
- 微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 ...
- 微信小程序wx.showActionSheet调用客服信息功能
微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...
- 微信小程序开发-易源API的调用
起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微 ...
- 微信小程序——页面中调用组件方法
我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...
- 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()
我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // ...
- 微信小程序使用原生WebSokcet实现断线重连及数据拼接
以前做小程序为了应急找了个插件去链接WebSokcet,文章传送门. 回过头在新项目中再次使用时出现了些许问题,不一一赘述.遂决定好好用一下原生的WebSokcet. 一.说明 1.小程序原生的Web ...
- 【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
随机推荐
- npm vue-router安装报错
因为2022年2月7日以后,vue-router的默认版本,为4版本,而且 vue-router4,只能在vue3中,只有vue-router3中,能用在vue 2中 如果把vue-router4强制 ...
- 性能再升级,XMeter Cloud 专业版正式上线
去年 8 月,EMQ 正式在全球市场推出了最简单.快速的 MQTT 负载和场景测试云服务--XMeter Cloud,用户无需部署即可进行 MQTT 测试,以更低的测试成本轻松打造具有竞争力的可靠物联 ...
- python中的KeyError报错
from util import str_util #业务逻辑:兼容不同的结构体:resCode转化数据 #检查字典中是否存在键 if 'resCode' not in resultJson if ' ...
- 运行Django项目报错
运行 pip install -r requirements.txt -i https://pypi.douban.com/simple
- Cesium测量优化1
简介:优化绘制点.线,面鼠标位置获取精度.支持3dties,gltf model,以及box等Geometry Entity上的位置拾取. 测试代码 <template> <div ...
- python使用SAP GUI操作SAP的几个坑
1) 首先必须设定SAP中设置可以使用SAP GUI Script. 详细参见以下文章: https://blog.csdn.net/weixin_44447687/article/details/1 ...
- vue v-if不生效
正确写法 <block v-for="(item, index) in imgArray"> <image :src="item" class ...
- WinForm嵌入Web网站
1.安装CefSharp 2.GetMac()获取用户mac地址方法 3.根据错误提示新建CEFKeyBoardHander.cs form1.cs using CefSharp; using Cef ...
- Java注解及应用原理
视频地址:https://www.bilibili.com/video/BV1Py4y1Y77P/?spm_id_from=333.337.search-card.all.click&vd_s ...
- 普通java项目打成jar包,引入第三方jar .
ja方法1 . MANIFEST.MF 中添加 Class-Path . 1. 项目src目录下创建 META-INF/MANIFEST.MF 文件.文件内容 Manifest-Version ...