生活随笔
收集整理的這篇文章主要介紹了
Echarts 做的温度计
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這個是參考的：https://blog.csdn.net/soldierofyou/article/details/82661263
這位大神是首發(fā)，謝謝了！我做了小小的調(diào)整
<!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
><!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom
--><div id
="main11" style
="width: 460px;height:360px;"></div
></body
><script type
="text/javascript">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
= ''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'})}leftColor
= Gradient
[Gradient
.length
- 1].color
;var 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',xAxisIndex
: 0,data
: [{value
: (TP_value
+ 10),label
: {normal
: {show
: true,position
: boxPosition
,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;} else {return '';}}}}},barGap
: '-100%',data
: kd
,barWidth
: 1,itemStyle
: {normal
: {color
: 'white',barBorderRadius
: 120,}},z
: 0}]};myChart
.setOption(option
);</script
></html
>
**1.溫度計的刻度 目前不需要負(fù)數(shù) 該如何修改？
**if(params
.dataIndex
> 130 || params
.dataIndex
<
; 10) {return '';} else {if((params
.dataIndex
- 10) === 0) {return params
.dataIndex
- 70;} else {return '';}}}
把-70改成-10，就是從0開始的刻度了
2.你要改上面的東西對應(yīng)的這里要改
series
: [{name
: '條',type
: 'bar',xAxisIndex
: 0,data
: [{value
: (TP_value
+ 10),label
: {normal
: {show
: true,
我把上面的那個data里的value:(showValue + 10)改為value:(TP_value + 10) 了就可以控制那個刻度上升了，還有就是我把showValue 相關(guān)的注釋了
這是我的項目中的截圖：
var myChart
= echarts
.init(document
.getElementById('main14'));var TP_value
= 40;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
> 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'})}leftColor
= Gradient
[Gradient
.length
- 1].color
;var option
= {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',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
: '#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
- 30;} else {return '';}}}}},barGap
: '-100%',data
: kd
,barWidth
: 1,itemStyle
: {normal
: {color
: 'white',barBorderRadius
: 120,}},z
: 0}]};myChart
.setOption(option
);
這個是參考的：https://blog.csdn.net/soldierofyou/article/details/82661263
這位大神是首發(fā)，謝謝了！我做了小小的調(diào)整
總結(jié)
以上是生活随笔為你收集整理的Echarts 做的温度计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
