//仪表盘刻度
let axisTicks = {
show: true,
lineStyle: {
color: '#1b8586',
width: 1
},
distance: -10,
splitNumber: 3,
}
let splitLines = {
show: true,
distance: -15,
lineStyle: {
color: '#1b8586',
width: 2
},
}
let axisLabel = {
distance: -20,
textStyle: {
color: "#03B7C9",
fontSize: "8"
}
}
// let details = {
// show: true,
// offsetCenter: [0, '60%'],
// formatter: (value) => {
// return `{a|${value}}\n{b|机组}`
// },
// rich: {
// a: {
// fontSize: 18,
// fontWeight:'bold',
// color: "#ff7705",
// },
// b: {
// fontSize: 20,
// color: '#fff'
// }
// }
// }
// let middleDetails = {
// show: true,
// offsetCenter: [0, '60%'],
// textStyle: {
// fontSize: 18,
// color: "#ff7705",
// }
// }
option = {
// title: [{
// left: "21%",
// bottom: '3%',
// padding: [5, 5, 5, -30],
// text: '1号机组',
// textStyle: textStyle,
// }, {
// padding: [5, 5, 5, -20],
// left: "47%",
// bottom: '3%',
// text: '全厂负荷',
// textStyle: textStyle,
// }, {
// left: "70%",
// bottom: '3%',
// text: '2号机组',
// textStyle: textStyle,
// }],
series: [
{ //中间仪表盘
type: 'gauge',
center: ['50%', '50%'], // 默认全局居中
radius: '60%',
splitNumber: 8, //刻度数量
min: 0,
max: 1000,
startAngle: 200,
endAngle: -20,
clockwise: true,
axisLine: {
show: true,
lineStyle: {
width: 2,
shadowBlur: 0,
color: [
[1, '#1b8586']
]
}
},
// axisLine:axisLine,
axisTick: axisTicks,
splitLine: splitLines,
axisLabel: axisLabel,
pointer: {
show: true,
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
},
detail: {
show: true,
offsetCenter: [0, '70%'],
formatter: (value) => {
return `{a|${value}}{b|(MW)}\n{c|全厂负荷}`
},
rich: {
a: {
fontSize: 16,
fontWeight: 'bold',
color: "#ff7705",
},
b: {
fontSize: 10,
color: '#ff7705'
},
c: {
fontSize: 18,
color: '#fff'
}
}
},
itemStyle: {
color: '#09c2c0'
},
data: [{
value: 888
}]
},
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
radius: '52%',
center: ['50%', '50%'], // 默认全局居中
min: 0,
max: 1000,
axisLine: {
lineStyle: {
width: 2,
color: [
[1, '#dddddd']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
pointer: {
show: false,
},
detail: {
show: false
},
},
{//左边仪表盘
type: 'gauge',
center: ['28%', '69%'], // 默认全局居中
radius: '50%',
splitNumber: 8, //刻度数量
min: 0,
max: 1000,
endAngle: 90,
startAngle: 215,
clockwise: true,
axisLine: {
show: true,
lineStyle: {
width: 2,
shadowBlur: 0,
color: [
[1, '#1b8586']
]
}
},
axisTick: axisTicks,
splitLine: splitLines,
axisLabel: axisLabel,
pointer: {
show: true,
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
},
itemStyle: {
color: '#09c2c0'
},
detail: {
show: true,
offsetCenter: [0, '70%'],
formatter: (value) => {
return `{a|${value}}{b|(MW)}\n{c|1号机组}`
},
rich: {
a: {
fontSize: 16,
fontWeight: 'bold',
color: "#ff7705",
},
b: {
fontSize: 10,
color: '#ff7705'
},
c: {
fontSize: 18,
color: '#fff'
}
}
},
data: [{
value: 500
}]
},
{
type: 'gauge',
center: ['28%', '69%'],
radius: '40%',
min: 0,
max: 1000,
endAngle: 90,
startAngle: 215,
splitNumber: 0,
axisLine: {
lineStyle: {
width: 2,
color: [
[1, '#dddddd']
]
}
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
pointer: {
show: false
},
detail: {
show: false
},
},
{//右边仪表盘
type: 'gauge',
center: ['72%', '69%'],
radius: '50%',
splitNumber: 8,
min: 0,
max: 1000,
startAngle: 90,
endAngle: -35,
clockwise: true,
axisLine: {
show: true,
lineStyle: {
width: 2,
shadowBlur: 0,
color: [
[1, '#1b8586']
]
}
},
axisTick: axisTicks,
splitLine: splitLines,
axisLabel: axisLabel,
pointer: {
show: true,
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
},
itemStyle: {
color: '#09c2c0'
},
detail: {
show: true,
offsetCenter: [0, '70%'],
formatter: (value) => {
return `{a|${value}}{b|(MW)}\n{c|2号机组}`
},
rich: {
a: {
fontSize: 16,
fontWeight: 'bold',
color: "#ff7705",
},
b: {
fontSize: 10,
color: '#ff7705'
},
c: {
fontSize: 18,
color: '#fff'
}
}
},
data: [{
value: 900
}]
},
{
type: 'gauge',
center: ['72%', '69%'],
radius: '40%',
min: 0,
max: 1000,
startAngle: 90,
endAngle: -35,
splitNumber: 0,
axisLine: {
lineStyle: {
width: 2,
color: [
[1, '#dddddd']
]
}
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
pointer: {
show: false
},
detail: {
show: false
},
},]
};
2021-04-23 Echart仪表盘
最新推荐文章于 2024-06-12 10:39:54 发布