java温度计的实现_echart 之实现温度计

百度这个图表支持不是很好，有的需要自己写，看大神们实现温度计都是用 水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来，可惜自己不是专业的前端

这是我的实现结果

好了上代码

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脚本的引入