生活随笔
收集整理的這篇文章主要介紹了
echarts实时温度计湿度计
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如何用echarts開發溫度計？
在項目開發中需要用到echarts來開發圖表時，一般我都是結合官網示例和百度一些echarts圖表樣式來開發。在開發過程中，需要顯示溫度，數字太單調了，結合圖表來顯示就讓頁面更既美觀又直觀。
下面給大家分享一個溫度計圖表，可以根據自己的UI圖去調整樣式。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>溫度計
</title><script src="js/jquery-1.11.1.min.js"></script><script src="js/echarts.min.js"></script>
</head><body style="height: 250px; margin: 0;width: 500px;"><div id="container" style="height: 100%"></div><script type="text/javascript">var dom = document.getElementById('container');var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});var params = {value: 52,title: "溫度計"}var app = {};var TP_value = params.value;var kd = [];var Gradient = [];var leftColor = '';var showValue = '';var boxPosition = [65, 0];var TP_txt = ''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 > 50) {TP_txt = '';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 0.5,color: '#E4D225'}, {offset: 1,color: '#E01F28'})} else if (TP_value >= 35) {TP_txt = '';Gradient.push({offset: 0,color: '#93FE94'}, {offset: 1,color: '#E4D225'})} else {TP_txt = '';Gradient.push({offset: 1,color: '#93FE94'})}leftColor = Gradient[Gradient.length - 1].color;var option = {title: {text: params.title,textStyle: {color: "#010081",align: "center",},left: "45%",},grid: { left: "30%",top: "3%",bottom: "14%",},yAxis: [{show: false,data: [],min: 0,max: 135,axisLine: {show: false}}, {show: false,min: 0,max: 50,}, {type: 'category',data: ['', '', '', '', '', '', '', '', '', ''],position: 'left',offset: -80,axisLabel: { fontSize: 10,color: 'black'},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',xAxisIndex: 0,data: [{value: (TP_value + 30),label: {normal: {show: true,position: boxPosition,width: 20,height: 100,formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',rich: {back: {align: 'center',lineHeight: 50,fontSize: 30,fontFamily: 'digifacewide',color: leftColor},unit: {fontFamily: '微軟雅黑',fontSize: 15,lineHeight: 50,color: leftColor},downTxt: {lineHeight: 50,fontSize: 25,align: 'center',color: leftColor}}}},}],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: 18,itemStyle: {normal: {color: '#0C2E6D',barBorderRadius: 50,}},z: 1}, {name: '外框',type: 'bar',xAxisIndex: 2,barGap: '-100%',data: [135],barWidth: 28,itemStyle: {normal: {color: '#4577BA',barBorderRadius: 50,}},z: 0}, {name: '圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 0,symbolSize: 38,itemStyle: {normal: {color: '#93FE94',opacity: 1,}},z: 2}, {name: '白圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 1,symbolSize: 50,itemStyle: {normal: {color: '#0C2E6D',opacity: 1,}},z: 1}, {name: '外圓',type: 'scatter',hoverAnimation: false,data: [0],xAxisIndex: 2,symbolSize: 60,itemStyle: {normal: {color: '#4577BA',opacity: 1,}},z: 0}, {name: '刻度',type: 'bar',yAxisIndex: 0,xAxisIndex: 3,label: {normal: {show: true,position: 'left',distance: 15, color: '#000000',fontSize: 14,formatter: function (params) {if (params.dataIndex > 130 || params.dataIndex < 10) {return '';} else {if ((params.dataIndex - 10) % 20 === 0) {return params.dataIndex - 30;} else {return '';}}}}},barGap: '-100%',data: kd,barWidth: 1,itemStyle: {normal: {color: '#000000', barBorderRadius: 120,}},z: 0}]};if (option && typeof option === 'object') {myChart.setOption(option);};setInterval(function () {var rdm = Math.floor(Math.random() * 100);var params = {value: rdm,title: "溫度計"}var Gradient = [];var warnTxt = "";if (params.value > 50) {Gradient.push({offset: 0,color: "#93FE94",},{offset: 0.5,color: "#E4D225",},{offset: 1,color: "#E01F28",});warnTxt = "溫度過高";} else if (params.value >= 35) {Gradient.push({offset: 0,color: "#93FE94",},{offset: 1,color: "#E4D225",});warnTxt = "溫度正常";} else {Gradient.push({offset: 1,color: "#93FE94",});warnTxt = "溫度過低";}let leftColor = Gradient[Gradient.length - 1].color;var boxPosition = [65, 0];myChart.setOption({series: [{data: [{value: params.value + 30,label: {normal: {show: true,position: boxPosition,width: 20,height: 100,formatter:"{back| " +params.value +" }{unit|°C}\n{downTxt|" +" " +"}",rich: {back: {align: "center",lineHeight: 50,fontSize: 30,fontFamily: "digifacewide",color: leftColor,},unit: {fontFamily: "微軟雅黑",fontSize: 15,lineHeight: 50,color: leftColor,},downTxt: {lineHeight: 50,fontSize: 25,align: "center",color: leftColor,},},},},name: params.title,},],},],});}, 1000);</script>
</body></html>```html
總結
以上是生活随笔為你收集整理的echarts实时温度计湿度计的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
