var data1 = 22
var data2 = 33
var colorSet = {
color: "#468EFD",
};
var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#25ABAA",
},
{
offset: 0.2,
color: "#25ABB4",
},
{
offset: 0.3,
color: "#FBB8AA",
},
{
offset: 0.5,
color: "#F89700",
},
{
offset: 1,
color: "#F63332",
},
]);
option = {
backgroundColor: "rgba(0,0,0)",
grid: { // 让图表占满容器
// height: "80%", // 高度
// left: "6%",
// right: "6%",
bottom: "0%",
top: "0%",
// height: "85%",
containLabel: true,
},
tooltip: {
formatter: "{当前湿度}: {c}%",
},
series: [{
name: "内部进度条",
type: "gauge",
center: ['50%', '45%'],
radius: "65%",
splitNumber: 10,
min: -10, //最小刻度
max: 60, //最大刻度
axisLine: {
lineStyle: {
color: [
[0.43, '#00A2E8'],
[0.6, '#95EC69'],
[1, '#ee2e38']
// [data1 / 60, colorSet.color],
// [1, "#5A5A89"],
],
width: 5,
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "℃";
} else {
return 0;
}
},
offsetCenter: [0, 50],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 20,
fontWeight: "400",
color: "#fff",
},
},
title: {
//标题
show: true,
offsetCenter: [0, '35%'], //设置标题位置
textStyle: {
color: "#fff",
fontSize: 16, //表盘上的标题文字大小
fontFamily: "PingFangSC",
},
},
data: [{
name: "温度",
value: data1,
},],
pointer: {
show: true,
length: "75%",
radius: "30%",
width: 4, //指针粗细
color: [
axislineColor
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: "#FFC600"
},
{
offset: 0.6,
color: "#30D27C"
},
{
offset: 1,
color: "#0B95FF"
}
])]
]
},
animationDuration: 4000,
},
{
name: "外部刻度",
type: "gauge",
center: ['50%', '45%'],
radius: "75%",
min: -10, //最小刻度
max: 60, //最大刻度
splitNumber: 5, //刻度数量
startAngle: 215,
endAngle: -35,
axisLine: {
show: true,
lineStyle: {
width: 10,
// 外部圆环颜色
color: [
[1, "rgba(0,0,0,0)"]
],
},
}, //仪表盘轴线
axisLabel: {
show: false,
color: "#4d5bd1",
distance: 8,
formatter: function (v) {
switch (v + "") {
case "0":
return "0";
case "25":
return "25";
case "50":
return "50";
}
},
fontSize: 8
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: colorSet.color, //用颜色渐变函数不起作用
width: 1,
},
// 刻度线长度
length: -8,
},
// 长分隔线样式
splitLine: {
show: true,
// 刻度长度
length: -20,
lineStyle: {
color: colorSet.color, //用颜色渐变函数不起作用
width: 1,
},
fontSize: 8,
},
detail: {
show: false,
},
pointer: {
show: false,
},
},
// 下面圆环
{
// 透明阴影
// 湿度
name: "",
type: "gauge",
radius: "40%",
center: ['50%', '80%'],
startAngle: 225,
endAngle: -45,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
// 阴影范围
width: 20,
color: [
[
data2 / 100,
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(69, 161, 255,0)",
},
{
offset: 0.3,
color: "rgba(69, 161, 255,0)",
},
{
offset: 1,
color: "rgba(69, 161, 255,0.7)",
},
]),
],
[1, "rgba(28,128,245,.0)"],
],
},
},
axisTick: {
show: false,
},
splitLine: {
show: 0,
},
axisLabel: {
show: 0,
},
pointer: {
show: false,
length: "100%",
},
detail: {
show: true,
offsetCenter: [1, "1%"],
textStyle: {
fontSize: 22,
color: "#0AFCE0",
},
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "%";
} else {
return 0;
}
},
},
itemStyle: {
color: "rgba(28, 128, 245,.3)",
borderColor: "rgba(28, 128, 245,1)",
},
data: [{
value: data2,
name: '湿度'
},],
title: {
//标题
show: true,
offsetCenter: [0, '45%'], //设置标题位置
textStyle: {
color: "#fff",
fontSize: 16, //表盘上的标题文字大小
fontFamily: "PingFangSC",
},
},
},
{
type: "gauge",
radius: "50%",
center: ['50%', '80%'],
splitNumber: 10,
splitLine: {
show: false,
},
min: 0,
max: 100,
startAngle: 225,
endAngle: -45,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
pointer: {
show: 0,
},
axisTick: {
show: false,
},
detail: {
show: true,
offsetCenter: [0, "50%"],
formatter: "",
textStyle: {
fontSize: 10,
color: "#ffffff",
lineHeight: 50,
},
},
},
{
type: "gauge",
radius: "40%",
center: ['50%', '80%'],
splitNumber: 10,
splitLine: {
show: false,
},
min: 0,
max: 100,
startAngle: 225,
endAngle: -45,
axisLabel: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 3,
shadowBlur: 0,
color: [
[0.4, '#00A2E8'],
[0.7, '#93FE94'],
[1, '#E0272A']
// [0.05, "#3F6BFC"],
// [0.1, "#4072FB"],
// [0.15, "#4077F9"],
// [0.2, "#417BF9"],
// [0.25, "#4282F8"],
// [0.3, "#4385F7"],
// [0.35, "#4389F6"],
// [0.4, "#448FF5"],
// [0.45, "#4594F4"],
// [0.5, "#4599F3"],
// [0.55, "#469EF2"],
// [0.6, "#46A3F1"],
// [0.65, "#46A6F0"],
// [0.7, "#24befe"],
// [0.75, "#12d1ff"],
// [0.8, "#06defe"],
// [0.85, "#05e0ff"],
// [0.9, "#06deff"],
// [0.95, "#06deff"],
// [1, "#06deff"],
],
},
},
pointer: {
show: 0,
},
axisTick: {
show: false,
},
detail: {
show: false,
},
}
],
}