[英]How to add tooltip in Echarts to Radar indicator
I am trying to add tooltips to the Radar indicator elements.我正在尝试向 Radar 指标元素添加工具提示。 So far I tried
tooltip:{show:true, trigger: "item", value:"tooltipText"}
in the indicator element but no luck:(, can be seen below in the code. For example if I hover on top of "销售(Sales)" it should show a tooltip with "tooltipText".到目前为止,我在指示器元素中尝试了
tooltip:{show:true, trigger: "item", value:"tooltipText"}
但没有运气:(,可以在下面的代码中看到。例如,如果我 hover 在“销售(Sales)”,它应该显示带有“tooltipText”的工具提示。
Running code example: https://echarts.apache.org/examples/en/editor.html?c=radar运行代码示例: https://echarts.apache.org/examples/en/editor.html?c=radar
option = {
title: {
text: '基础雷达图'
},
legend: {
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
},
tooltip: {
trigger: 'item'
},
radar: {
// shape: 'circle',
indicator: [
{ name: '销售(Sales)', max: 6500, tooltip:{show:true, trigger: "item", value:"tooltipText"}},
{ name: '管理(Administration)', max: 16000, tooltip:{show:true, trigger: "item", value:"tooltipText"}},
{ name: '信息技术(Information Technology)', max: 30000, tooltip:{show:true, trigger: "item", value:"tooltipText"}}
]
},
series: [{
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
]
}]
};
Just add "tooltip: {}" inside option.只需在选项中添加“工具提示:{}”。 Like this, you can change the tooltip inside the series option, the same way you were doing before.
像这样,您可以更改系列选项中的工具提示,就像您之前所做的那样。
The code would look like this:代码如下所示:
option = {
title: {
text: '基础雷达图'
},
legend: {
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
},
radar: {
// shape: 'circle',
indicator: [
{ name: '销售(Sales)', max: 6500},
{ name: '管理(Administration)', max: 16000},
{ name: '信息技术(Information Technology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
]
},
tooltip: {},
series: [{
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
],
tooltip:{
// do something here if you want
}
}]
}; };
Try removing the tooltip div from canvas and append it to the body worked for me.尝试从 canvas 和 append 中删除工具提示 div 到对我有用的正文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.