當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Echarts 做的温度计

發布時間：2024/3/24 编程问答 61 豆豆

生活随笔收集整理的這篇文章主要介紹了 Echarts 做的温度计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這個是參考的：https://blog.csdn.net/soldierofyou/article/details/82661263
這位大神是首發，謝謝了！我做了小小的調整

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>溫度計</title><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script></head><body><div id="main11" style="width: 460px;height:360px;"></div></body><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main11'));var TP_value = 95;var kd = [];var Gradient = [];var leftColor = '';var showValue = '';var boxPosition = [65, 0];var TP_txt = ''// 刻度使用柱狀圖模擬，短設置1，長的設置3；構造一個數據for(var i = 0, len = 135; i <= len; i++) {if(i < 10 || i > 130) {kd.push('')} else {if((i - 10) % 20 === 0) {kd.push('-3');} else if((i - 10) % 4 === 0) {kd.push('-1');} else {kd.push('');}}}//中間線的漸變色和文本內容if(TP_value > 80) {TP_txt = '溫度偏高';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 0.5,color: '#E4D225'}, {offset: 1,color: '#E01F28'})} else if(TP_value > 10) {TP_txt = '溫度正常';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 1,color: '#E4D225'})} else {TP_txt = '溫度偏低';Gradient.push({offset: 1,color: '#93FE94'})}/* if(TP_value > 62) {showValue = 62} else {if(TP_value < -60) {showValue = -60} else {showValue = TP_value}}if(TP_value < -10) {boxPosition = [65, -120];} */leftColor = Gradient[Gradient.length - 1].color;// 因為柱狀初始化為0，溫度存在負值，所以加上負值60和空出距離10var option = {backgroundColor: '#098',title: {text: '溫度計',show: false},yAxis: [{show: false,data: [],min: 0,max: 135,axisLine: {show: false}}, {show: false,min: 0,max: 50,}, {type: 'category',data: ['', '', '', '', '', '', '', '', '', '', '°C'],position: 'left',offset: -80,axisLabel: {fontSize: 10,color: 'white'},axisLine: {show: false},axisTick: {show: false},}], xAxis: [{show: false,min: -10,max: 80,data: []}, {show: false,min: -10,max: 80,data: []}, {show: false,min: -10,max: 80,data: []}, {show: false,min: -5,max: 80,}],series: [{name: '條',type: 'bar',// 對應上面XAxis的第一個對)象配置xAxisIndex: 0,data: [{value: (TP_value + 10),//這個改那個顏色刻度的label: {normal: {show: true,position: boxPosition,/*backgroundColor: {image: 'plugin/subway_beijing/images/power/bg5Valuebg.png',//文字框背景圖},*/width: 40,height: 100,formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',rich: {back: {align: 'center',lineHeight: 50,fontSize: 40,fontFamily: 'digifacewide',color: leftColor},unit: {fontFamily: '微軟雅黑',fontSize: 15,lineHeight: 50,color: leftColor},downTxt: {lineHeight: 50,fontSize: 25,align: 'center',color: '#fff'}}}}}],barWidth: 18,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)}},z: 2}, {name: '白框',type: 'bar',xAxisIndex: 1,barGap: '-100%',data: [134],barWidth: 28,itemStyle: {normal: {color: '#0C2E6D',barBorderRadius: 50,}},z: 1}, {name: '外框',type: 'bar',xAxisIndex: 2,barGap: '-100%',data: [135],barWidth: 38,itemStyle: {normal: {color: '#4577BA',barBorderRadius: 50,}},z: 0}, {name: '圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 0,symbolSize: 48,itemStyle: {normal: {color: '#93FE94',opacity: 1,}},z: 2}, {name: '白圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 1,symbolSize: 60,itemStyle: {normal: {color: '#0C2E6D',opacity: 1,}},z: 1}, {name: '外圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 2,symbolSize: 70,itemStyle: {normal: {color: '#4577BA',opacity: 1,}},z: 0}, {name: '刻度',type: 'bar',yAxisIndex: 0,xAxisIndex: 3,label: {normal: {show: true,position: 'left',distance: 10,color: 'white',fontSize: 14,formatter: function(params) {if(params.dataIndex > 130 || params.dataIndex < 10) {return '';} else {if((params.dataIndex - 10) % 20 === 0) {return params.dataIndex - 10;//這個改刻度的，當減70的時候刻度是從-60開始不是從零開始} else {return '';}}}}},barGap: '-100%',data: kd,barWidth: 1,itemStyle: {normal: {color: 'white',barBorderRadius: 120,}},z: 0}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></html> **1.溫度計的刻度目前不需要負數該如何修改？**if(params.dataIndex > 130 || params.dataIndex < 10) {return '';} else {if((params.dataIndex - 10) === 0) {return params.dataIndex - 70;} else {return '';}}}

把-70改成-10，就是從0開始的刻度了
2.你要改上面的東西對應的這里要改

series: [{name: '條',type: 'bar',// 對應上面XAxis的第一個對)象配置xAxisIndex: 0,data: [{value: (TP_value + 10),//這個改那個顏色刻度的label: {normal: {show: true,

我把上面的那個data里的value:(showValue + 10)改為value:(TP_value + 10) 了就可以控制那個刻度上升了，還有就是我把showValue 相關的注釋了

這是我的項目中的截圖：

這個是參考的：https://blog.csdn.net/soldierofyou/article/details/82661263
這位大神是首發，謝謝了！我做了小小的調整

總結

以上是生活随笔為你收集整理的Echarts 做的温度计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python从txt读取数据并画图_py
下一篇：在蝰蛇峡谷上实现YOLOv5模型的Ope