React--》打造可通用的数据可视化Echarts组件
在本篇文章中，波追将探讨如何利用 React 框架和 Echarts 库来打造通用的数据可视化组件，无论是展示复杂的数据趋势，还是创建交互式的图表，React 和 Echarts 的结合将为您的应用带来无限的可能性。
·
在本篇文章中，波追将探讨如何利用 React 框架和 Echarts 库来打造通用的数据可视化组件，无论是展示复杂的数据趋势，还是创建交互式的图表，React 和 Echarts 的结合将为您的应用带来无限的可能性。
前言：博主也不可能面面俱到考虑到所有的情况，如果读者使用之后遇到问题，欢迎评论区留下你遇到的问题，博主看到之后会对代码进行维护修改！
目录
react封装echarts通用组件
封装通用库首先要把ecarts中基本出现的所有情况所用到的第三方库都要进行安装，这里介绍如下
1）echarts(必选)：这是echarts的核心库，用于创建和展示各种类型的图表，包括折线图、柱状图、饼图等，它提供了丰富的配置选项和交互功能，适用于大多数基本的数据可视化需求。
2）echarts-gl(可选)：这是echarts的WebGL扩展库，用于支持在3D空间中展示图表，如三维散点图、地图等，通过echarts-gl，您可以利用WebGL技术创建更复杂和更具视觉效果的数据可视化图表。
3）echarts-liquidfill(可选)：这是echarts的液态填充特效扩展库，专门用于创建动态的水球图或者液态填充效果的图表，它通常用于展示百分比、比例或者进度等数据，具有视觉上的动态效果，可以吸引用户的注意力。
当然这里是需要根据自己项目的需求进行安装，没有必要全部进行安装：
npm install echarts echarts-gl echarts-liquidfill --save接下来开始封装通用的echarts组件，具体的如下所示：
// 封装echarts组件
import { useRef, useEffect, useLayoutEffect } from 'react';
import * as echarts from 'echarts';
const ChartBase = ({ options }: any) => {
const chartRef = useRef<HTMLDivElement>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = () => {
if (!chartRef.current || !chartRef.current.clientWidth || !chartRef.current.clientHeight) {
console.warn("无法获取图表容器的尺寸！");
return;
}
// 销毁之前的实例
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartRef.current);
chartInstance.setOption(options);
}
// 使用 useLayoutEffect 确保 DOM 更新后立即执行
useLayoutEffect(() => {
if (chartRef.current && chartRef.current.clientWidth && chartRef.current.clientHeight) {
initChart();
}
}, [chartRef.current]); // chartRef.current 变化时执行 initChart
// 监听图表options变化
useEffect(() => {
if (chartInstance) {
chartInstance.setOption(options);
}
}, [options]);
useEffect(() => {
// 监听图表容器尺寸变化
const resizeObserver = new ResizeObserver(() => {
if (chartInstance) {
chartInstance.resize();
}
});
// 监听图表容器尺寸变化
if (chartRef.current) {
resizeObserver.observe(chartRef.current);
}
return () => {
if (resizeObserver && chartRef.current) {
resizeObserver.unobserve(chartRef.current);
}
if (chartInstance) {
chartInstance.dispose(); // 组件卸载时销毁实例
chartInstance = null;
}
};
}, []);
return <div className="chart-base" ref={chartRef} style={{ width: '100%', height: '100%' }}></div>;
}
export default ChartBase;接下来我们借助这个通用组件进行一个简单的演示，代码如下所示：
最终在页面中展示出来了，效果如下所示：
react封装echarts通用轮播组件
这里我们设置一下自动轮播的核心js代码，如下所示：
/**
* echarts tooltip 自动轮播
* @param chart
* @param chartOption
* @param options
* {
* interval 轮播时间间隔，单位毫秒，默认为2000
* loopSeries boolean类型，默认为false。
* true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
* seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
* 当loopSeries为true时，从seriesIndex系列开始执行.
* }
* @returns {{clearLoop: clearLoop}}
*/
export const autoToolTip = (chart, chartOption, options) => {
var defaultOptions = {
interval: 2000,
loopSeries: false,
seriesIndex: 0,
updateData: null,
};
if (!chart || !chartOption) {
return {};
}
var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
var seriesIndex = 0; // 系列索引
var timeTicket = 0;
var seriesLen = chartOption.series.length; // 系列个数
var dataLen = 0; // 某个系列数据个数
var chartType; // 系列类型
var first = true;
// 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
// 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
// 要不要添加开始series索引和开始的data索引？
if (options) {
options.interval = options.interval || defaultOptions.interval;
options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
options.updateData = options.updateData || defaultOptions.updateData;
} else {
options = defaultOptions;
}
// 如果设置的seriesIndex无效，则默认为0
if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
seriesIndex = 0;
} else {
seriesIndex = options.seriesIndex;
}
function autoShowTip() {
function showTip() {
// 判断是否更新数据
if (
dataIndex === 0 &&
!first &&
typeof options.updateData === "function"
) {
options.updateData();
chart.setOption(chartOption);
}
var series = chartOption.series;
chartType = series[seriesIndex].type; // 系列类型
dataLen = series[seriesIndex].data.length; // 某个系列的数据个数
var tipParams = { seriesIndex: seriesIndex };
switch (chartType) {
case "map":
case "pie":
case "chord":
tipParams.name = series[seriesIndex].data[dataIndex].name;
break;
case "radar": // 雷达图
tipParams.seriesIndex = seriesIndex;
tipParams.dataIndex = dataIndex;
break;
default:
tipParams.dataIndex = dataIndex;
break;
}
if (
chartType === "pie" ||
chartType === "radar" ||
chartType === "map" ||
chartType === "scatter"
) {
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: options.loopSeries
? seriesIndex === 0
? seriesLen - 1
: seriesIndex - 1
: seriesIndex,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1,
});
// 高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: seriesIndex,
dataIndex: dataIndex,
});
}
// 显示 tooltip
tipParams.type = "showTip";
chart.dispatchAction(tipParams);
dataIndex = (dataIndex + 1) % dataLen;
if (options.loopSeries && dataIndex === 0 && !first) {
// 数据索引归0表示当前系列数据已经循环完
seriesIndex = (seriesIndex + 1) % seriesLen;
}
first = false;
}
showTip();
timeTicket = setInterval(showTip, options.interval);
}
// 关闭轮播
function stopAutoShow() {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
if (
chartType === "pie" ||
chartType === "radar" ||
chartType === "map" ||
chartType === "scatter"
) {
// 取消高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: options.loopSeries
? seriesIndex === 0
? seriesLen - 1
: seriesIndex - 1
: seriesIndex,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1,
});
}
}
}
var zRender = chart.getZr();
// 鼠标在zrender上时停止轮播
function zRenderMouseMove(param) {
if (param.event) {
// 阻止canvas上的鼠标移动事件冒泡
param.event.cancelBubble = true;
}
stopAutoShow();
}
// 离开echarts图时恢复自动轮播
function zRenderGlobalOut() {
if (!timeTicket) {
autoShowTip();
}
}
// 鼠标在echarts图上时停止轮播
chart.on("mousemove", stopAutoShow);
zRender.on("mousemove", zRenderMouseMove);
zRender.on("globalout", zRenderGlobalOut);
autoShowTip();
return {
clearLoop: function () {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
}
chart.off("mousemove", stopAutoShow);
zRender.off("mousemove", zRenderMouseMove);
zRender.off("globalout", zRenderGlobalOut);
},
};
};接下来我们对上文封装好的echarts通用组件进行一个轮播处理：
// 封装echarts组件
import { useRef, useEffect, useLayoutEffect } from 'react';
import * as echarts from 'echarts';
import { autoToolTip } from './echarts.js';
const ChartBase = ({ options, carousel }: any) => {
const chartRef = useRef<HTMLDivElement>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = () => {
if (!chartRef.current || !chartRef.current.clientWidth || !chartRef.current.clientHeight) {
console.warn("无法获取图表容器的尺寸！");
return;
}
// 销毁之前的实例
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartRef.current);
chartInstance.setOption(options);
}
// 使用 useLayoutEffect 确保 DOM 更新后立即执行
useLayoutEffect(() => {
if (chartRef.current && chartRef.current.clientWidth && chartRef.current.clientHeight) {
initChart();
}
}, [chartRef.current]); // chartRef.current 变化时执行 initChart
// 监听图表options变化
useEffect(() => {
if (chartInstance) {
chartInstance.setOption(options);
}
}, [options]);
useEffect(() => {
// 监听图表容器尺寸变化
const resizeObserver = new ResizeObserver(() => {
if (chartInstance) {
chartInstance.resize();
}
});
// 监听图表容器尺寸变化
if (chartRef.current) {
resizeObserver.observe(chartRef.current);
}
return () => {
if (resizeObserver && chartRef.current) {
resizeObserver.unobserve(chartRef.current);
}
if (chartInstance) {
chartInstance.dispose(); // 组件卸载时销毁实例
chartInstance = null;
}
};
}, []);
useEffect(() => {
if (carousel) {
let JSQKloop: any;
// 在每次 useEffect 执行时，先清理之前的 JSQKloop 实例
if (JSQKloop) {
JSQKloop.clearLoop();
}
// 创建新的 autoToolTip 实例
JSQKloop = autoToolTip(chartInstance, options, {
interval: carousel.interval || 2000,
loopSeries: carousel.loopSeries || false,
seriesIndex: carousel.seriesIndex || 0,
});
// 返回清理函数，在下次 useEffect 执行时调用
return () => {
if (JSQKloop) {
JSQKloop.clearLoop();
}
};
}
}, [chartInstance, options]);
return <div className="chart-base" ref={chartRef} style={{ width: '100%', height: '100%' }}></div>;
}
export default ChartBase;文件顺序如下所示：
接下来我们在根组件传递轮播参数进行处理：
然后页面会根据我们是否传递轮播参数来判断当前的echarts是否需要进行轮播，如下所示：
永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)