javascript - 如何将 Echarts 中的工具提示添加到雷达指标
问题描述
我正在尝试向雷达指示器元素添加工具提示。到目前为止,我尝试tooltip:{show:true, trigger: "item", value:"tooltipText"}
了指标元素但没有运气:(,可以在下面的代码中看到。例如,如果我将鼠标悬停在“销售(Sales)”顶部,它应该显示带有“tooltipText”的工具提示。
运行代码示例: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)'
}
]
}]
};
解决方案
只需在选项中添加“工具提示:{}”。像这样,您可以像以前一样更改系列选项中的工具提示。
代码如下所示:
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
}
}]
};
推荐阅读
- algorithm - 如何解决这个算法问题(关于平面和线)?
- generics - 将枚举传递给 Blazor 组件的参数
- python - OSError:[Errno 22] 无效参数:'The Game (John Smith)\n.txt'
- list - 如何摆脱 Haskell 列表中列表的子列表?
- python - TypeError:videoResponsive()得到了一个意外的关键字参数“宽度”
- html - Bootstrap 导航栏切换不起作用(扩展)
- c# - 为什么我的除法运算返回 0?
- redis - Redis 有序对象集,通过 GUID 键检索 O(1) 并按另一个 64 位有符号整数键按降序排序
- postgresql - 意外检测到表中的所有数据,使用循环 psql 将虚拟数据插入表
- python - Pyinstaller 无法识别