Tabla de contenido
Monitoreo de temperatura del equipo, requisitos del tablero
El código y el diagrama de efectos son los siguientes
El proyecto debe mostrar un gráfico de la temperatura actual del dispositivo, de la siguiente manera: después de
leer el ejemplo en echart, no hay uno listo, así que busqué la configuración por mi cuenta y luego escribí una.
En el proceso de escritura, descubrí que el código ajustado en el sitio web oficial mostraba errores en el proyecto.
Se encontró que la versión echart utilizada por el proyecto es la 4, mientras que el sitio web oficial ya es la 5. La última versión tiene algunos elementos de configuración nuevos que la versión anterior no tiene, por lo que la visualización será incorrecta.
Aquí he configurado las versiones 4 y 5.
echart versión 5.x
Primero, el código para la versión 5 es el siguiente:
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
series: [
{
type: 'gauge', // 仪表盘
max: 150, // 仪表盘最大值
splitNumber: '10', // 仪表盘的段数
axisLine: {
lineStyle: {
width: 30,
color: [
[0.5, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'inherit',
distance: -50,
fontSize: 20,
formatter: function (value) {
if (
value === 0 ||
value === 150 * 0.5 ||
value === 150 * 0.7 ||
value === 150
) {
return value;
}
}
}
},
{
type: 'gauge',
radius: '65%',
axisLine: {
lineStyle: {
width: 30,
color: [[1, '#fff']]
}
},
// 当前进度
progress: {
show: true,
overlap: false,
clip: false,
itemStyle: {
color: 'red'
}
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: true,
color: 'red',
offsetCenter: [0, '-3%'],
fontSize: '48'
},
detail: {
valueAnimation: true,
offsetCenter: [0, '-30%'],
fontSize: '48',
formatter: '{value} ℃',
color: 'inherit'
},
data: [
{
value: 70,
name: '当前温度'
}
]
}
]
};
option && myChart.setOption(option);
Pegue las representaciones:
echart versión 4.x
option = {
series: [
{
type: "gauge", // 仪表盘
max: 150, // 仪表盘最大值
splitNumber: "10", // 仪表盘的段数
axisLine: {
lineStyle: {
width: 30,
color: [
[0.5, "#21d9ce"],
[0.7, "#eb9210"],
[1, "#e94f29"],
],
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
color: "#fff",
distance: -48,
fontSize: 12,
formatter: function (value) {
if (
value === 0 ||
value === 150 * 0.5 ||
value === 150 * 0.7 ||
value === 150
) {
return value;
}
},
},
detail: {
show: false,
},
},
{
type: "gauge",
max: this.max,
radius: "58%",
axisLine: {
lineStyle: {
width: 30,
color: [
[0.6, '#eb9210'], // 模拟当前的进度 percentage 百分比 , currentColor 进度的颜色
[1, "#adb4b580"],
],
},
},
progress: {
show: true,
overlap: false,
clip: false,
itemStyle: {
color: "red",
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: true,
color: "red",
offsetCenter: [0, "20%"],
fontSize: "48",
},
detail: {
valueAnimation: true,
offsetCenter: [0, "-30%"],
fontSize: "48",
formatter: '{value}℃',
},
data: [
{
value: 70, name: '当前温度' }
],
},
],
};
option && myChart.setOption(option);
Pegue las representaciones:
