百度這個圖表支持不是很好，有的需要自己寫，看大神們實現溫度計都是用 水球特效實現的我這里雕蟲小計啊但是滿足我了我的項目需求特此分享出來，可惜自己不是專業的前端

這是我的實現結果

好了上代碼

html：

js代碼：

var myChart = echarts.init(document.getElementById("main"));

var data = [50];

var xMax = 80;

var axisColor = '#fff';

option = {

tooltip: {

show: true,

formatter: "{b}
{c}"

},

yAxis: [{

min:0,

max:70,

position:'left',

offset:-140,

axisTick: {

show: true,

// color:'#fff',

},

axisLine: {

show: false,

},

axisLabel: {

show: true,

formatter:function(value,index){

return value-20;

}

//color:'#fff',

},

splitLine: {

show: false,

// color:'#fff',

},

splitNumber :10,

}],

xAxis: [{

type: 'category',

data: ['溫度'],

axisTick: {

// color:'#fff',

show: false,

},

axisLine: {

// color:'#fff',

show: false,

},

axisLabel: {

textStyle: {

color: '#fff',

}

}

}],

series: [{

name: ' ',

type: 'bar',

barWidth: 40,

silent: true,

itemStyle: {

normal: {

color: '#fdd',

barBorderRadius: [0, 0, 0, 0],

}

},

barGap: '-100%',

//barCategoryGap: '60%',

data: data.map(function(d) {

return xMax

}),

}, {

name: ' ',

type: 'bar',

barWidth: 40,

label: {

normal: {

show: true,

position: 'top',

formatter: function(o){

return o.value-30+'℃';

},

}

},

data: [{

value: 15+30,

itemStyle: {

normal: {

barBorderRadius: [0, 0, 0, 0],

color: {

type: 'bar',

colorStops: [{

offset: 0,

color: 'rgba(225,42,84,.3)' // 0% 處的顏色

}, {

offset: 1,

color: '#ffa800' // 100% 處的顏色

}],

globalCoord: false, // 缺省為 false

}

}

}

} ],

}]

};

myChart.setOption(option);

js腳本的引入

總結

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

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