echarts-bot[bot] commented on issue #19824:
URL: https://github.com/apache/echarts/issues/19824#issuecomment-2051295829
@guoliuqing123 It seems you are not using English, I've helped translate the
content automatically. To make your issue understood by more people and get
helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] Add title display to each radar chart
**BODY**
### Version
none
### Link to Minimal Reproduction
none
### Steps to Reproduce
let data = [
[
[ "Technology\nGuarantee\nCentral\nHeart\n", "#255359",4.94,5,
5.01,4.98,4.96,4.93,4.94],
["Network\nCenter\nHeart\n","#336774", 4.96,5.02, 5.01,
5,4.99,4.98,4.97]
],
]
let arr1 = []
let arr2 = []
if (data && data.length > 0) {
data.forEach((items,index) => {
let y = data.length === 1 ? '50%' : '';
let radius = '35%';
if(items[0]) {
let obj1 ={
center: data.length === 1 ? ['28%', y] : ['28%', y], //Radar
chart position
radius: radius, //Radar chart diameter
indicator: [
{name: 'W1', max: 10},
{name: 'W7', max: 10, axisLabel: {show: false}},
{name: items[0][0]+' '+' W6', max: 10, axisLabel: {show:
false}},
// {name: 'W6', max: 10, axisLabel: {show: false}},
{name: 'W5', max: 10, axisLabel: {show: false}},
{name: 'W4', max: 10, axisLabel: {show: false}},
{name: 'W3', max: 10, axisLabel: {show: false}},
{name: 'W2', max: 10, axisLabel: {show: false}}
],
nameGap:5, //The distance between the indicator name and the
indicator axis.
splitNumber: 5, // Radar chart circle setting
axisLine: { //Set the color of the middle ray of the radar
chart
lineStyle: {
color: '#fff',
},
},
axisLabel: {
show: false,
textStyle: {
fontSize: 8,
color: '#333',
}
}, //axis text label
splitArea: { //Set the chart color, the value of show is true
show: false,
areaStyle: {
color: "#fff", //General setting method
},
},
name: { //Modify the color of indicator text
textStyle: {
color: "#4f4f4f",
fontSize:7,
}
},
};
arr1.push(obj1)
let obj3 ={
type: 'radar',
radarIndex: arr1 && arr1.length ? arr1.length-1 :'',
symbolSize:4,
data: [{
name:items[0][0],
value: items[0].slice(2),
itemStyle: { //Style settings for this numerical area
normal: {
color: items[0][1], //Background color, areaStyle also
needs to be set
},
},
},]
};
arr2.push(obj3)
}
if(items[1]){
let obj2 ={
center: data.length === 1 ? ['73%', y] : ['73%', y], //Radar
chart position
radius: radius, //Radar chart diameter
indicator: [
{name: 'W1', max: 10},
{name: 'W7', max: 10, axisLabel: {show: false}},
{name: items[1][0]+' '+' W6', max: 10, axisLabel: {show:
false}},
// {name: 'W6', max: 10, axisLabel: {show: false}},
{name: 'W5', max: 10, axisLabel: {show: false}},
{name: 'W4', max: 10, axisLabel: {show: false}},
{name: 'W3', max: 10, axisLabel: {show: false}},
{name: 'W2', max: 10, axisLabel: {show: false}}
],
nameGap:5, //The distance between the indicator name and the
indicator axis.
splitNumber: 5, // Radar chart circle setting
axisLine: { //Set the color of the middle ray of the radar
chart
lineStyle: {
color: '#fff',
},
},
axisLabel: {
show: false,
textStyle: {
fontSize: 8,
color: '#333',
}
}, //axis text label
splitArea: { //Set the chart color, the value of show is true
show: false,
areaStyle: {
color: "#fff", //General setting method
},
},
name: { //Modify the color of indicator text
textStyle: {
color: "#4f4f4f",
fontSize:7,
}
},
};
arr1.push(obj2)
let obj4 ={
type: 'radar',
radarIndex: arr1 && arr1.length ? arr1.length-1 :'',
symbolSize:4,
data: [
{
name:items[1][0],
value: items[1].slice(2),
itemStyle: { //Style settings for this numerical area
normal: {
color: items[1][1], //Background color, areaStyle also
needs to be set
},
},
},
]
};
arr2.push(obj4)
}
});
}
option ={
radar:arr1,
series:arr2,
tooltip: {
formatter(params){
return (params.name + '<br/>'+
'W1: '+params.value[0]+ '<br/>'+
'W2: '+params.value[1]+ '<br/>'+
'W3: '+params.value[2]+ '<br/>'+
'W4: '+params.value[3]+ '<br/>'+
'W5: '+params.value[4]+ '<br/>'+
'W6: '+params.value[5]+ '<br/>'+
'W7: '+params.value[6]
)
},
},
}
### Current Behavior
![Uploading QQ1.png…]()
The current style is implemented in the name of the indicator. If the
fontweight is modified in this way, other text will also be affected. If you
want to achieve a picture that behaves as expected, when you modify the
fontweight, other text will not be affected.
### Expected Behavior
![Uploading QQ3.png…]()
If you want to achieve the image that behaves as expected, when you modify
the fontweight, other text will not be affected.
### Environment
```markdown
-OS:
-Browser:
- Framework:
```
### Any additional comments?
_No response_
</details>
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
