获取ECharts

Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。

1、从 GitHub 获取
2、从 npm 获取
3、从 CDN 获取
4、在线定制

安装方式

从 npm 获取

npm install echarts --save

详见在项目中引入 Apache ECharts。

从 CDN 获取

推荐从 jsDelivr 引用echarts。

从 GitHub 获取

apache/echarts 项目的 release页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

在线定制

如果只想引入部分模块以减少包体积，可以使用ECharts 在线定制功能。

博主采用从 GitHub 获取ECharts。附ECharts官方配置手册。
数据查询地址：OneNet查询数据流详情。
微信小程序官方配置文档。

ECharts实现代码

index.js

//引入echarts文件
import * as echarts from '../../utils/ec-canvas/echarts';function line_set(chart, xdata, ydata) {var option = {title: {text: '温度随时间变化图',left: 'center'},color: ["#37A2DA", "#67E0E3", "#9FE6B8"],grid: {containLabel: true},tooltip: {show: true,trigger: 'axis'},xAxis: {name:'日期',axisLabel: { interval:0,  rotate:70} ,type: 'category',boundaryGap: false,data: xdata},yAxis: {name:'温度/℃',x: 'center',type: 'value',splitNumber:5,min: 0,max: 40,splitLine: {lineStyle: {type: 'dashed'}}},series: [{name: '温度',type: 'line',smooth: true,data: ydata}]};chart.setOption(option);
}
Page({/*** 页面的初始数据*/data: {ec: {lazyLoad: true},timer:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this;this.getOption();this.setData({                    //每隔10s刷新一次timer: setInterval(function () {_this.getOption();}, 10000)})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.oneComponent = this.selectComponent('#mychart-dom-bar');},onUnload: function () {clearInterval(this.data.timer)
},init_chart: function (xdata, ydata) {        //初始化第一个图表this.oneComponent.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});line_set(chart, xdata, ydata)this.chart = chart;return chart;});
},
getOption: function () {var _this = this;wx.request({url: 'https://api.heclouds.com/devices/device_id/datastreams/datastream_id&limit=10',   //请求数据接口地址；device_id：需要替换为设备ID；datastream_id：需要替换为数据流IDmethod: 'GET',header: {"Content-Type": "application/x-www-form-urlencoded","api密匙": 'xxxxx'},data:{},success:  (res)=> {console.log(res);_this.setData({      //将接口返回的数据data赋值给datadata:res.data  })var ivar Temperature=[];var date=[];for (i = 0; i <res.data.data.count; i++) {Temperature[i]=res.data.data.datastreams[0].datapoints[i].value;date[i]=res.data.data.datastreams[0].datapoints[i].at;}_this.init_chart(date,Temperature)           },   })
}
})

index.json

{"usingComponents": {"ec-canvas": "../../utils/ec-canvas/ec-canvas"}
}

index.wxml

<!--index.wxml-->
<view class="container"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

index.wxss

/**index.wxss**/
ec-canvas {width: 750rpx;height: 1000rpx;
}

在微信小程序page文件夹中创建index文件夹，将上述4个文件写在index文件夹中，最后在app.json中配置路径，即可实现。

app.json

"pages": ["pages/bar/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#089BFD","navigationBarTitleText": "OneNet数据","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

pages页面配置说明

pages——页面路径列表
window——全局的默认窗口表现|-backgroundTextStyle——下拉 loading 的样式，仅支持 dark / light|-navigationBarBackgroundColor——导航栏背景颜色|-navigationBarTitleText——导航栏标题文字内容|-navigationBarTextStyle——导航栏标题颜色，仅支持 black / white
style——指定使用升级后的weui样式
sitemapLocation——指明 sitemap.json 的位置

效果图

PS:

要使y轴脱离 0 值比例。在yAxis中配置scale:'true'。注：只在数值轴中（type: 'value'）有效，设置成 true 后坐标刻度不会强制包含零刻度,在设置 min 和 max 之后该配置项无效。（yAxis必须配置show:true才能显示！！！）
只显示时间，不显示日期配置：时间获取成功后，做字符串分隔

success:  (res)=> {console.log(res);_this.setData({      //将接口返回的数据data赋值给datadata:res.data  })var ivar Temperature=[];var date=[];for (i = 0; i <res.data.data.count; i++) {Temperature[i]=res.data.data.datastreams[0].datapoints[i].value;date[i]=res.data.data.datastreams[0].datapoints[i].at;var data = String(date[i]).split(' ')var time = data[1].split('.')date[i] = time[0]}_this.init_chart(date,Temperature)           }

坐标轴其他配置见echarts配置项手册，博主在此不过多阐述！

地址：源码地址；使用源码请注明出处

微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022-11-20相关推荐

Unity3d C# 开发微信小游戏分享图片、朋友圈等功能实现（含源码）
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前编写了一篇u3 ...
微信小游戏：Cocos Creator《守卫竹林》线上游戏源码资源分享
<守卫竹林>源码资源分享 <守卫竹林>的云开发方式与文章微信小游戏:云开发(三)云开发和CocosCreator解决方案介绍的相同,可以作为参考 <守卫竹林>下载链 ...
HTML按钮控制数据源 + echarts图表展示
HTML按钮控制数据源 + echarts图表展示时过匆匆,转眼见2018就剩下仅有的5天了,开心吗???2018的自己经历的许多许多,收获失败.痛苦快乐.酸甜苦辣都有.即将过去的12月特别的忙碌, ...
微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
【微信小程序系列】小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
2023微信社区小程序+APP+后台，附带超详细完整搭建教程【源码+教程】
2023微信社区小程序+APP+后台,附带超详细完整搭建教程[源码+教程] 微信授权登陆正常,小程序和APP带后台手机号登陆正常,发帖,建圈子.发活动. 微信小程序是一种轻量级的应用程序,可以在微信 ...
《数据分析-Echarts》Python + Django + echarts图表展示
Python + Django + echarts图表展示项目打包文件一.准备工作 ## 1.python环境安装 ## 2.python开发工具PyCharm安装二.创建Django项目三. ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...

微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022-11-20