项目初始化
最简单的折线图📈
import ReactECharts from "echarts-for-react";
import { FC } from "react";
export const EchartsTooltip: FC = () => {
return (
<ReactECharts
style={{ height: 800, width: '100%' }}
option={{
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
tooltip: {
trigger: 'axis'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
}}
/>
);
};
当期望自定义 tooltip 时，Echarts 提供了 tooltip formatter 回调函数。
tooltip: {
trigger: 'axis',
formatter: (params) => {
console.log('params', params)
return params
}
},
提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
回调函数支持返回 HTML 字符串或者创建的 DOM 实例。
(params: Object|Array) => string | HTMLElement | HTMLElement[]
renderToStaticMarkup
renderToStaticMarkup 是 React 提供的一个服务端渲染（Server-Side Rendering, SSR）API，属于 react-dom/server 模块。它的主要作用是将 React 元素渲染为静态的 HTML 字符串。
由于输出的是纯 HTML，因此组件中的事件处理器（如 onClick）不会起作用。
基本用法
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
const EmailTemplate = () => (
<html>
<body>
<h1>Hello, world!</h1>
<p>This is an email template.</p>
</body>
</html>
);
const html = renderToStaticMarkup(<EmailTemplate />);
console.log(html);
输出结果：
<html><body><h1>Hello, world!</h1><p>This is an email template.</p></body></html>
输出的 HTML 非常干净，没有任何多余的 React 元数据。
图表使用 renderToStaticMarkup
tooltip: {
trigger: 'axis',
formatter: (params) => {
return renderToStaticMarkup(<h1>23456</h1>)
}
},
通过 renderToStaticMarkup 可以自定义 tooltip。当然，这个时候 tooltip 前方的圆点已经不存在了。我们也无法将 params.marker 渲染出来，这是一个字符串。
tooltip: {
trigger: "axis",
formatter: (params) => {
return renderToStaticMarkup(
<div>
<span
style={{
display: "inline-block",
width: 10,
height: 10,
borderRadius: 10,
backgroundColor:
params?.[0].marker?.match(/#(?:[0-9a-fA-F]{6})/)?.[0],
}}
/>
235
</div>
);
},
},
