如何解决具有不同工具提示的EChart系列
我的Angular应用程序中具有以下EChart:
var option = {
xAxis: {
type: 'category',data: ["A","B","C","D","E"]
},yAxis: {
type: 'value',},tooltip: {
trigger: 'axis',axisPointer: {
type: 'shadow',formatter: (params) => {
return (
"Text One" +
'<br/>' +
params[0].name
);
},series: [
{
data: [1,2,3,4,5],name: 'value',stack: 'one',type: 'bar',tooltip: {
formatter: (params) => {
return (
"Text One" +
'<br/>' +
params[0].name
);
},{
data: [0,1,4],name: 'prediction',tooltip: {
formatter: (params) => {
return (
"Text Two" +
'<br/>' +
params[0].name
);
},],};
我基本上有two series
,我的问题是如何为每个系列专门格式化tooltip
。
解决方法
工具提示触发器有两种类型(“项目”和“轴”)
请使用tooltip.trigger ='item', 分别显示不同系列的工具提示。
tooltip.trigger ='axis'用于显示给定轴级别上所有系列数据的通用工具提示。
,如果使用工具提示触发器“轴”,则格式化程序功能参数中的“参数”将是一个包含系列工具提示信息的数组。
如果要格式化第一个序列,则可以访问params [0]。同样,如果要格式化第二个系列,则可以访问params [1]。
请参见以下示例:
var option = {
xAxis: {
type: "category",data: ["A","B","C","D","E"],},yAxis: {
type: "value",tooltip: {
trigger: "axis",axisPointer: {
type: "shadow",formatter: (params) => {
return `
Tooltip: <br />
${params[0].seriesName}: ${params[0].value}<br />
${params[1].seriesName}: ${params[1].value}
`;
},series: [
{
data: [1,2,3,4,5],name: "model",stack: "one",type: "bar",{
data: [0,1,4],name: "prediction",],};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。