function mid_temp(data){
var temperature;
if(JSON.stringify(data)!="{}"){
if(data.hasOwnProperty('total_train_info')){
temperature =data.total_train_info[5].displayValue;
}else{
temperature="0.0℃";
}
}else{
temperature="0.0℃";
}
var t= Number(temperature.replace('℃',''));
var dom = document.getElementById('temp');
var temp = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var params = {
value: t,//数值
title: "温度"
};
var app = {};
var TP_value = params.value;
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 > 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;
// 因为柱状初始化为0,温度存在负值,所以加上负值60和空出距离10
var option = {
// backgroundColor: '#098',
// backgroundColor: 'white',
title: {
text: params.title,
textStyle: {
color: "#8b8bd0",
align: "center",
},
left: "45%",
},
grid: { // 控制图的大小,调整下面这些值就可以,
left: "30%",
top: "12%",
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',
// 对应上面XAxis的第一个对)象配置
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: 20, // 刻度数据位置
color: '#ffffff',// 刻度数字颜色
fontSize: 14,
formatter: function (params) {
if (params.dataIndex > 130 || params.dataIndex < 10) {
return '';
} else {
if ((params.dataIndex - 10) % 20 === 0) {
return params.dataIndex - 30;//这个改刻度的,当减70的时候刻度是从-60开始不是从零开始
} else {
return '';
}
}
}
}
},
barGap: '-100%',
data: kd,
barWidth: 1,
itemStyle: {
normal: {
color: '#f0f0f0', // 刻度线颜色
barBorderRadius: 120,
}
},
z: 0
}]
};
if(temperature!=temperatureLast){
if (option && typeof option === 'object') {
temp.setOption(option);
};
var boxPosition = [65, 0];
temp.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|" + " " + "}",
//formatter: item.senValue ,
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,
},
],
},
],
});
temperatureLast=temperature;
}
window.addEventListener("resize", function (event) {
temp.resize();
})
};