Flex 中给LineChart的节点上显示数值

本文深入解析如何利用mx库中的LineSeries组件,通过yField和verticalAxis属性,实现对需求量数据的高效可视化,并结合特定的itemRenderer(如com.hp.rms.view.LineRenderer)提升展示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <mx:LineSeries yField="demand_weight" verticalAxis="{deWt}"
        displayName="需求量" itemRenderer="com.hp.rms.view.LineRenderer" >

重点在itemRenderer这个属性上面哦~

<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文件,给予这两个文件,实现仪表盘,显示实时数据和折线图
最新发布
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值