代码:
Chart1!.setOption({
title: {
text: "就诊数据统计",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params: any[]) {
// 获取当前选中的是哪一行(就诊数量或就诊收入)
const categoryName = params[0].name;
// 只保留当前行相关的数据
const filteredParams = params.filter((param) => {
// 对于"就诊数量"行,只保留xAxisIndex为0的系列
if (categoryName === "就诊数量" && param.seriesIndex < 3) {
return true;
}
// 对于"就诊收入"行,只保留xAxisIndex为1的系列
if (categoryName === "就诊收入" && param.seriesIndex >= 3) {
return true;
}
return false;
});
// 如果没有数据,返回空
if (filteredParams.length === 0) {
return "";
}
// 构建提示文本
let result = `${categoryName}<br/>`;
let unit = categoryName === "就诊数量" ? "次" : "元";
filteredParams.forEach((param) => {
// 使用彩色标记和名称
result += `${param.marker} ${param.seriesName}: ${param.value}${unit}<br/>`;
});
return result;
},
},
legend: {
left: "right",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "value",
min: 0,
minInterval: 100, // 最小单位为100次
position: "bottom",
axisLabel: {
formatter: "{value}次",
},
},
{
type: "value",
min: 0,
minInterval: 100, // 最小单位为100元
position: "top",
axisLabel: {
formatter: "{value}元",
},
},
],
yAxis: {
type: "category",
data: ["就诊数量", "就诊收入"],
axisPointer: {
type: "shadow",
},
},
series: [
// 就诊数量系列 - 只使用下方X轴(xAxisIndex: 0)
{
name: "医生问诊",
type: "bar",
barWidth: 25,
stack: "图表",
label: {
show: true,
position: "inside",
},
xAxisIndex: 0,
data: [doctorConsult, "-"], // 第一个位置是"就诊数量"行
itemStyle: {
color: "#52c41a", // 医生颜色
},
},
{
name: "治疗师咨询",
type: "bar",
stack: "图表",
xAxisIndex: 0,
label: {
show: true,
position: "inside",
},
data: [therapistConsult, "-"], // 第一个位置是"就诊数量"行
itemStyle: {
color: "#faad14", // 治疗师颜色
},
},
{
name: "护士咨询",
type: "bar",
stack: "图表",
xAxisIndex: 0,
label: {
show: true,
position: "inside",
},
data: [nurseConsult, "-"], // 第一个位置是"就诊数量"行
itemStyle: {
color: "#2ed1d1", // 护士颜色
},
},
// 就诊收入系列 - 只使用上方X轴(xAxisIndex: 1)
{
name: "医生问诊",
type: "bar",
barWidth: 25,
stack: "图表",
xAxisIndex: 1,
label: {
show: true,
position: "inside",
},
data: ["-", doctorAmount], // 第二个位置是"就诊收入"行
itemStyle: {
color: "#52c41a", // 医生颜色
},
},
{
name: "治疗师咨询",
type: "bar",
stack: "图表",
xAxisIndex: 1,
label: {
show: true,
position: "inside",
},
data: ["-", therapistAmount], // 第二个位置是"就诊收入"行
itemStyle: {
color: "#faad14", // 治疗师颜色
},
},
{
name: "护士咨询",
type: "bar",
stack: "图表",
xAxisIndex: 1,
label: {
show: true,
position: "inside",
},
data: ["-", nurseAmount], // 第二个位置是"就诊收入"行
itemStyle: {
color: "#2ed1d1", // 护士颜色
},
},
],
});
ps: 注意series里面的stack都要写一样