144 lines
4.7 KiB
JavaScript
144 lines
4.7 KiB
JavaScript
// Gauge chart options
|
||
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
|
||
const colorRanges = isDarkMode
|
||
? [
|
||
[0.375, '#49AA19'], // Dark Green
|
||
// [0.5, '#B8860B'], // Dark Yellow
|
||
[0.625, '#D89614'], // Dark Orange
|
||
[1, '#D32029'], // Dark Red
|
||
]
|
||
: [
|
||
[0.375, '#52C41A'], // Light Green
|
||
// [0.5, '#FFD700'], // Light Yellow
|
||
[0.625, '#FAAD14'], // Light Orange
|
||
[1, '#F5222D'], // Light Red
|
||
];
|
||
// Old color range
|
||
// const gaugeColors = [
|
||
// [0, "#ed1c24"],
|
||
// [0.6, "#ed1c24"],
|
||
// [0.8, "#f7931e"],
|
||
// [1.0, "#009245"],
|
||
// ];
|
||
// const gaugeColors2 = [
|
||
// [0, "#009245"],
|
||
// [0.6, "#009245"],
|
||
// [0.8, "#f7931e"],
|
||
// [1.0, "#ed1c24"],
|
||
// ];
|
||
return {
|
||
grid: {
|
||
// top: '-10%',
|
||
bottom: 0,
|
||
},
|
||
title: {},
|
||
graphic: [
|
||
{
|
||
type: "circle",
|
||
left: "center",
|
||
top: "center",
|
||
shape: {
|
||
r: backgroundRadius, // radius of the background circle
|
||
},
|
||
style: {
|
||
fill: isDarkMode ? "#141415" : "#F5F5F5", // Light grey color
|
||
opacity: 0.3, // Semi-transparent
|
||
},
|
||
z: 0, // make sure it's behind the gauge
|
||
},
|
||
],
|
||
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius: "90%",
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
min: min,
|
||
max: max,
|
||
// progress: {
|
||
// show: true,
|
||
// width: 15,
|
||
// },
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 12,
|
||
// color: [
|
||
// [0.375, "#3CB371"], // Green (0–60)
|
||
// [0.5, "#FFD700"], // Yellow (60–80)
|
||
// [0.625, "#FFA500"], // Orange (80–100)
|
||
// [1, "#FF4500"], // Red (100–160)
|
||
// ],
|
||
color: colorRanges
|
||
},
|
||
},
|
||
axisTick: {
|
||
distance: -12,
|
||
length: 5,
|
||
lineStyle: {
|
||
color: "#000000",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
distance: -12,
|
||
length: 8,
|
||
lineStyle: {
|
||
color: "#000000",
|
||
width: 2,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: isDarkMode ? "#fff" : "#333333",
|
||
distance: 23,
|
||
fontSize: 9,
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
length: "70%",
|
||
width: 6,
|
||
itemStyle: {
|
||
color: "#FA8C16", // Set your desired pointer color here
|
||
},
|
||
},
|
||
title: {
|
||
show: false,
|
||
offsetCenter: [0, "40%"],
|
||
fontSize: 18,
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
||
fontFamily: "Oxanium, sans-serif", // or any custom font
|
||
fontSize: 30,
|
||
lineHeight: 25,
|
||
offsetCenter: [0, "60%"],
|
||
color: isDarkMode ? "#fff" : "#333333",
|
||
formatter: function (value) {
|
||
return `{valueStyle|${value}}\n{percentStyle|${unit}}`;
|
||
},
|
||
rich: {
|
||
// valueStyle: {
|
||
// fontSize: 25,
|
||
// fontWeight: "bold",
|
||
// },
|
||
percentStyle: {
|
||
fontSize: 10,
|
||
color: isDarkMode ? "#fff" : "#333333",
|
||
// fontWeight: "normal",
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 16,
|
||
name: "에너지사용효율", // "Energy Usage Efficiency"
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
}
|
||
|
||
|