<template>
<view class="container">
<canvas
canvas-id="gaugeCanvas"
id="gaugeCanvas"
class="charts"
@touchstart="touchGauge"
></canvas>
</view>
</template>
<script>
import uCharts from '@qiun/ucharts';
export default {
data() {
return {
gaugeChart: null,
gaugeData: {
categories: [{
value: 0.2,
color: '#ff0000'
}, {
value: 0.8,
color: '#00ff00'
}],
series: [{
name: '完成率',
data: 75 // 仪表盘指针位置（0-100）
}]
}
};
},
mounted() {
this.drawGauge();
},
methods: {
// 绘制仪表盘
drawGauge() {
const canvasContext = uni.createCanvasContext('gaugeCanvas', this);
this.gaugeChart = new uCharts({
context: canvasContext,
canvasId: 'gaugeCanvas',
type: 'gauge',
width: uni.upx2px(750),
height: uni.upx2px(500),
dataLabel: true,
dataPointShape: true,
extra: {
gauge: {
// 仪表盘配置
startAngle: 0.75, // 起始角度
endAngle: 0.25, // 结束角度
gaugePosition: 'center',
radius: 120,
gaugeLabel: {
fontSize: 14,
color: '#666'
},
gaugeUnit: {
show: true,
text: '%',
color: '#333'
}
}
},
categories: this.gaugeData.categories,
series: this.gaugeData.series
});
this.gaugeChart.draw();
},
// 触摸交互事件
touchGauge(e) {
this.gaugeChart.touchLegend(e);
this.gaugeChart.showToolTip(e);
}
}
};
</script>
<style>
.container {
padding: 20rpx;
}
.charts {
width: 750rpx;
height: 500rpx;
}
</style>这是自己创建的component/gauge目录下的gaugeuchart.vue文件，<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="text-area">
<text class="title">温度：{{temp}}</text>
</view>
<view class="text-area">
<text class="title">湿度：{{humi}}</text>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">开启中</view>
<switch @change="SetDHT11Data" checked />
</view>
</view>
</view>
</template>
<script>
const {createCommonToken} = require('@/static/JS/key.js');
export default {
data() {
return {
title: '智慧农业',
temp: '0',
humi: '0',
toekn:'',
author_key:'eW9ytDbAl5938mv3tcbQYKshM5TgSB8f6IrUe7Q3M2gzdyYFzVErWZ/Sn0TlTTeZ',
version:'2022-05-01',
user_id:'449813'
}
},
onLoad() {
this.gettoken();
console.log(this.token);
this.getDHTdata();
},
methods: {
gettoken(){
const params={
author_key:this.author_key,
version:this.version,
user_id:this.user_id
}
this.token=createCommonToken(params);
},
getDHTdata(){
uni.request({
url:'https://iot-api.heclouds.com/thingmodel/query-device-property',//请求的url
method:'GET',//请求方式
header:{
'authorization':this.token
},
data:{
product_id:'GvyD8vzX31',
device_name:'DHT11'
},
success:(res) => {
console.log(res);
if(res.data.code==0)
{
var arr=res.data.data;
for(var i=0;i<arr.length;i++)
{
if(arr[i].identifier=='humi')
{
this.humi=arr[i].value;
}
if(arr[i].identifier=='temp')
{
this.temp=arr[i].value;
}
}
}
},
fail:(err) =>{
console.error('请求失败:',err);
}
});
},
SetDHT11Data(event){
//console.log('按钮状态改变');
//console.log(event);
var value=event.detail.value;
uni.request({
url:'https://iot-api.heclouds.com/thingmodel/set-device-property',//请求的url
method:'POST',//请求方式
header:{
'authorization':this.token
},
data:{
product_id:'GvyD8vzX31',
device_name:'DHT11',
params:{
led : value
}
},
success:(res) => {
console.log(res);
},
fail:(err) =>{
console.error('请求失败:',err);
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
这是index文件，给予这两个文件，实现仪表盘，显示实时数据和折线图
最新发布
本文深入解析如何利用mx库中的LineSeries组件，通过yField和verticalAxis属性，实现对需求量数据的高效可视化，并结合特定的itemRenderer（如com.hp.rms.view.LineRenderer）提升展示效果。
扫一扫
4786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
