使用React Echarts实现复杂树状图数据的展示和搜索展开功能

2024-02-11 19:52:23

前言

数据可视化对于理解和分析复杂数据非常重要。树状图是一种常见的用于显示层次数据的图表类型，它可以帮助用户理解数据之间的关系和结构。Echarts是一个流行的JavaScript可视化库，它提供了丰富的图表类型和强大的自定义功能。

实现步骤

1. 安装依赖

首先，我们需要安装必要的依赖：

npm install --save react echarts antd

2. 创建图表组件

接下来，我们需要创建一个React组件来渲染我们的树状图。

import React, { useEffect, useRef } from "react";
import { Tree } from "echarts/charts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";

const TreeChart = ({ data }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    // 初始化echarts实例
    const chart = echarts.init(chartRef.current);

    // 使用树状图组件
    use([Tree]);

    // 绘制图表
    chart.setOption({
      series: [
        {
          type: "tree",
          data: data,
          // ... 其他图表配置
        },
      ],
    });

    // 销毁图表实例
    return () => chart.dispose();
  }, [data]);

  return <div ref={chartRef} style={{ height: "400px" }} />;
};

export default TreeChart;

3. 集成搜索功能

为了实现搜索功能，我们需要在组件中添加一个搜索输入框和一个搜索按钮。

import React, { useEffect, useRef, useState } from "react";
import { Tree } from "echarts/charts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";

const TreeChart = ({ data }) => {
  const chartRef = useRef(null);
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    // 初始化echarts实例
    const chart = echarts.init(chartRef.current);

    // 使用树状图组件
    use([Tree]);

    // 监听搜索输入框的变化
    const searchInput = document.getElementById("search-input");
    searchInput.addEventListener("input", (e) => {
      setSearchQuery(e.target.value);
    });

    // 绘制图表
    chart.setOption({
      series: [
        {
          type: "tree",
          data: data,
          // ... 其他图表配置
          label: {
            // 在标签中显示搜索结果
            formatter: (params) => {
              if (params.name.includes(searchQuery)) {
                return `<span style="color: red">${params.name}</span>`;
              } else {
                return params.name;
              }
            },
          },
        },
      ],
    });

    // 销毁图表实例
    return () => chart.dispose();
  }, [data, searchQuery]);

  return (
    <div>
      <input type="text" id="search-input" placeholder="搜索" />
      <div ref={chartRef} style={{ height: "400px" }} />
    </div>
  );
};

export default TreeChart;

4. 实现展开功能

为了实现展开功能，我们需要在组件中添加一个按钮，并添加事件监听器来响应按钮点击事件。

import React, { useEffect, useRef, useState } from "react";
import { Tree } from "echarts/charts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";

const TreeChart = ({ data }) => {
  const chartRef = useRef(null);
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    // 初始化echarts实例
    const chart = echarts.init(chartRef.current);

    // 使用树状图组件
    use([Tree]);

    // 监听搜索输入框的变化
    const searchInput = document.getElementById("search-input");
    searchInput.addEventListener("input", (e) => {
      setSearchQuery(e.target.value);
    });

    // 监听按钮点击事件
    const expandButton = document.getElementById("expand-button");
    expandButton.addEventListener("click", () => {
      // 展开所有节点
      chart.dispatchAction({
        type: "treeExpandAndCollapse",
        seriesIndex: 0,
        payload: {
          expandAll: true,
        },
      });
    });

    // 绘制图表
    chart.setOption({
      series: [
        {
          type: "tree",
          data: data,
          // ... 其他图表配置
          label: {
            // 在标签中显示搜索结果
            formatter: (params) => {
              if (params.name.includes(searchQuery)) {
                return `<span style="color: red">${params.name}</span>`;
              } else {
                return params.name;
              }
            },
          },
        },
      ],
    });

    // 销毁图表实例
    return () => chart.dispose();
  }, [data, searchQuery]);

  return (
    <div>
      <input type="text" id="search-input" placeholder="搜索" />
      <button id="expand-button">展开全部</button>
      <div ref={chartRef} style={{ height: "400px" }} />
    </div>
  );
};

export default TreeChart;