Как реализовать множественную всплывающую подсказку или метку для гистограмм с помощью React-Echarts ⇐ Javascript

[Anonymous]

Я реализовал гистограмму React-Echarts с подсказкой при наведении на график, и при наведении на нее должна отображаться другая метка, но она не работает должным образом. Я пробовал использовать события onMouseover, но он не работает должным образом. Мне нужна была гистограмма с всплывающей подсказкой при наведении на график, а при наведении на всплывающую подсказку она должна отображать дополнительные сведения о графике в качестве еще одной всплывающей подсказки рядом с первой. один.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactECharts from "echarts-for-react";

const BarChartUpdated = ({ data, label, categories }: any) => {
const [tooltipData, setTooltipData] = useState(null);

const generateColors = (categories: string[]) => {
const colorMap: Record = {};
const colorPalette = [
"#5470C6",
"#91CC75",
"#EE6666",
"#FAC858",
"#73C0DE",
"#9A60B4",
"#EA7CCC",
];
categories.forEach((category, index) => {
if (!colorMap[category]) {
colorMap[category] = colorPalette[index % colorPalette.length];
}
});

return colorMap;
};

const categoryColors = generateColors(categories);
const sanitizedData = data.map((value: number) => (isNaN(value) ? 0 : value));
const total = sanitizedData.reduce(
(sum: number, value: number) => sum + value,
0,
);

const option = {
title: {
text: label,
},
tooltip: {
trigger: "axis",
formatter: (params: any) => {
return params
.map(
(item: any) =>
`${item.name} Count: ${item.value > 0 ? item.value : 0}`,
)
.join("
");
},
},
toolbox: {
feature: {
saveAsImage: { show: true, title: "Save as Image" },
dataZoom: { show: true, title: "Zoom" },
},
},
xAxis: {
type: "category",
data: categories,
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
data: data.map((value: number, index: number) => ({
value,
itemStyle: {
color: categoryColors[categories[index]],
},
label: {
show: true,
position: "top",
formatter:
total {
if (event && event.data) {
const { name, value } = event.data;
const { offsetX, offsetY } = event.event;
setTooltipData({
x: offsetX,
y: offsetY,
details: `More details for ${name}: Count ${value}`,
isVisible: true,
});
}
};

const handleMouseOut = () => {
setTooltipData((prev) => (prev ? { ...prev, isVisible: false } : null));
};

const handleTooltipMouseEnter = () => {
setTooltipData((prev) => (prev ? { ...prev, isVisible: true } : null));
};

const handleTooltipMouseLeave = () => {
setTooltipData(null);
};

return (


{tooltipData &&
ReactDOM.createPortal(
tooltipData.isVisible && (
onMouseEnter={handleTooltipMouseEnter}
onMouseLeave={handleTooltipMouseLeave}
style={{
position: "fixed",
top: tooltipData.y,
left: tooltipData.x,
transform: "translate(-50%, -100%)",
background: "white",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
zIndex: 1000,
}}
>
{tooltipData.details}

),
document.body,
)}

);
};

export default BarChartUpdated;


Подробнее здесь: https://stackoverflow.com/questions/793 ... ct-echarts