javascript - Echart 工具提示设置
问题描述
我在我的 vue js 应用程序中使用 echart( https://v-charts.js.org/#/en/ring )。我正在尝试在环形图中自定义工具提示。但我无法得到。当鼠标悬停在特定颜色上时,我想在工具提示中显示我自己的 json 数据。
html代码:
<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>
Javascript代码:
chartSettings: {
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'red', 'lightgreen'
];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: false
}
},
tooltip: {
show: true,
trigger: 'item',
position: ['35%', '32%'],
backgroundColor: 'implements',
textStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 55,
},
},
},
OptionRingChart: {
color: ['green', 'red'],
columns: ['name', 'test'],
rows: [
{ 'name': 'D', 'test': 1 },
{ 'name': 'C', 'test': 2 }
],
},
解决方案
您将需要使用tooltip.formatter
var option = {
tooltip: {
show: true,
trigger: 'item',
formatter: function (a) {
my_json_data = get_and_format_my_data()
return `${my_json_data}`
}
}
}
推荐阅读
- node.js - SyntaxHighlighter 的 npm 构建问题
- html - 如何使用 rgba(0,0,0,0.5) 使我的背景变暗
- ios - 使用页面视图控制器在视图之间滑动时防止视图控制器更新
- jquery - 将 c# 数据表绑定(传递)到 jquery 数据表导致错误
- python - 一种删除列表中仅一个元素的连续重复项的pythonic方法
- go - Golang 反射:检查结构类型定义以在不初始化的情况下提取其属性
- java - 将 Akka 流传递给上游服务以填充
- python - 如何使用 Numpy 与原始 Python 计算 0≤y≤10 和 20000 点的 sin(x) 之间的执行时间差异?
- javascript - 如何组合来自两个不同应用程序的请求从一个请求中获取数据并将其作为对另一个请求的响应发送?
- c++ - 类的全局变量/实例对象的 C++ 别名