微信小程序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使 ...
随机推荐
- php json_encode 斜杠 反斜杠 转义处理
$data = str_replace("\\\\n", "\\n", \jsonEncode($data)); // \\n转为\n $data = str_ ...
- ThinkPHP接收header自定义参数
// 请求拦截,配置Token等参数 Vue.prototype.$u.http.interceptor.request = (config) => { config.header['conte ...
- 第三周day2
第三周day2,星期二 所花时间:1h 代码量:60 博客量:2 了解知识点:按钮属性,文本属性.帧布局.表格布局.约束布局.
- 现代 C++ 教程 高速上手 C++ 11/14/17/20
国人作品,主要介绍C++11/14/17的新特性,适合新手阅读
- php echo print
echo print都是语言结构,都不是函数,但echo没有返回值,print有. echo print
- xd p3 搭建安全扩展
常见搭建平台脚本启用 常见平台java Python php jsp搭建要启用脚本 中间件(搭建平台):Apache IIS Tomcat Nginx 主机头值 即 域名 域名IP目录解析安全问题 域 ...
- P8201 [传智杯 #4 决赛] [yLOI2021] 生活在树上(hard version)
个人思路: 首先,题目可以转化为是否存在 \(a,b\) 路径上一点 \(u\),满足 \(w_u = dis{1,a} \oplus dis{1,b} \oplus w_{lca(a,b)} \op ...
- js 三维数组转对象数组 二维数组转对象数组
1. 三维数组转对象数组 输出: 代码如下: let dataArr = [ [ [109.654541015625, 29.34387539941801], [110.467529296875, ...
- 杭电oj 多项式求和
Problem Description 多项式的描述如下:1 - 1/2 + 1/3 - 1/4 + 1/5 - 1/6 + ...现在请你求出该多项式的前n项的和. Input 输入数据由2行组 ...
- C/C++ 关键字 static 详细解析
static关键字是一个修饰符,根const类似,被它修饰的变量和函数分别被称为静态变量和静态函数,根据修饰的对象的不同,static表现出来的作用也不同. 1. C语言中的 static 在C语言中 ...