mrk*_*rks 7 javascript echarts ngx-echarts apache-echarts
我的 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, 2, 3, 4],
name: 'prediction',
stack: 'one',
type: 'bar',
tooltip: {
formatter: (params) => {
return (
"Text Two" +
'<br/>' +
params[0].name
);
},
},
},
],
};
Run Code Online (Sandbox Code Playgroud)
我基本上已经做到了,two series我的问题是如何为每个系列专门格式化tooltip。
在我的示例中,仅显示第一个系列中的“文本 1”。
小智 12
如果您使用工具提示触发器“axis”,则格式化程序函数参数中的“params”将是一个包含系列工具提示信息的数组。
如果要格式化第一个系列,可以访问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, 2, 3, 4],
name: "prediction",
stack: "one",
type: "bar",
},
],
};
Run Code Online (Sandbox Code Playgroud)
有两种类型的工具提示触发器(“item”和“axis”)
请使用tooltip.trigger = 'item',为不同系列单独显示工具提示。
tooltip.trigger='axis' 用于显示公共工具提示,其中包含给定轴级别的所有系列数据。