willonf edited a comment on issue #16262:
URL: https://github.com/apache/echarts/issues/16262#issuecomment-1086272765
I really don't know, because I figured out using a chart above my chart. Look the code below if you understand:
```
option = {
series: [
{
type: "gauge",
center: ["50%", "60%"],
startAngle: 200,
endAngle: -20,
min: 0,
max: 50,
splitNumber: 10,
itemStyle: {
color: "#4caf50"
},
progress: {
show: true,
width: 30
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30
}
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#999"
}
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: "#999"
}
},
axisLabel: {
distance: -20,
color: "#999",
fontSize: 20
},
anchor: {
show: false
},
title: {
show: true,
},
detail: {
valueAnimation: true,
width: "100%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "-15%"],
fontSize: 40,
fontWeight: "bolder",
formatter: "{value} °C",
color: "inherit"
},
data: [{value: 0}],
animationEasingUpdate: "cubicIn",
},
// Maximum and minimum mark lines.
// You need to manipulate the values below
// to set the positions of marks lines
{
type: "gauge",
center: ["50%", "60%"],
z: 3,
endAngle: -20,
max: 100,
startAngle: 200,
min: 0,
splitNumber: 1,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
width: 0,
}
},
axisLabel: {
show: false,
},
splitLine: {
distance: 0,
length: 30,
lineStyle: {
width: 2,
color: "black"
}
}
},
]
}
```
I put it on the echart editor (https://echarts.apache.org/examples/en/editor.html?c=gauge-temperature) and it worked.
In my code worked only when I write like this:
On the .ts file (or .js):
```
public chartMergeTemperature = {};
gaugeChartTemperatureOptions: EChartsOption = {
series: [
{
type: "gauge",
center: ["50%", "60%"],
startAngle: 200,
endAngle: -20,
min: 0,
max: 50,
splitNumber: 10,
itemStyle: {
color: "#4caf50"
},
progress: {
show: true,
width: 30
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30
}
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#999"
}
},
splitLine: {
distance: -52,
length: 14,
lineStyle: {
width: 3,
color: "#999"
}
},
axisLabel: {
distance: -20,
color: "#999",
fontSize: 20
},
anchor: {
show: false
},
title: {
show: true,
},
detail: {
valueAnimation: true,
width: "100%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "-15%"],
fontSize: 40,
fontWeight: "bolder",
formatter: "{value} °C",
color: "inherit"
},
data: [{value: 0}],
animationEasingUpdate: "cubicIn",
},
// Maximum and minimum mark lines
{
type: "gauge",
center: ["50%", "60%"],
z: 3,
endAngle: -20,
max: 100,
startAngle: 200,
min: 0,
splitNumber: 1,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
width: 0,
}
},
axisLabel: {
show: false,
},
splitLine: {
distance: 0,
length: 30,
lineStyle: {
width: 2,
color: "black"
}
}
},
]
};
```
And on the .html file (I'm using Angular)
```
<div fxFlex="85" autoResize="true" echarts [options]="gaugeChartTemperatureOptions"
[merge]="chartMergeTemperature"></div>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org