前言

        在数据驱动的时代，可视化数据大屏已成为企业决策和业务分析的重要工具。本文将带您从零开始，逐步掌握如何设计并实现一个高效、美观的可视化数据大屏，帮助您更好地展示和分析数据。

1. 熟悉可视化工具

1.1 可视化工具的学习与实践

 在可视化项目中，选择合适的工具是成功的第一步。我深入研究了以下两款主流工具：

  •  ​ECharts：百度开源的可视化库，功能强大且易于上手，支持多种图表类型，适合快速开发。
  • G2：蚂蚁金服推出的可视化引擎，灵活性高，适合高度定制化的需求。

        通过熟练掌握这些工具，我能够高效地实现各种图表需求，为项目提供坚实的技术支持。

1.2 在react中如何使用echarts进行图表开发

        在 React 中使用 ECharts 可以通过charts-for-react 这个库来实现

        对echarts进行的React封装，可以用于React项目中，支持JS、TS。

        npm地址：echarts-for-react - npm

1.3 安装echart、echarts-for-react

 npm install echarts --save
 npm install --save echarts-for-react

1.4 在组件内导入echart

import ReactEcharts from 'echarts-for-react';

1.5 React中使用

        在使用时只需要在官网中找到需求模块，将option里的代码复制在下方自己写的代码option中

        如图所示

import React from "react";
import ReactEcharts from 'echarts-for-react';
const Home: React.FC = () => {
    const option = {

    }
    return (
        <>
            <ReactEcharts option={option} />
        </>
    )

}
export default Home;

       

完成代码

import React from "react";
import ReactEcharts from 'echarts-for-react';
const Home: React.FC = () => {
    let option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    return (
        <>
            <ReactEcharts option={option} />
        </>
    )

}
export default Home;

案例展示：饼图

官网地址：Examples - Apache ECharts

2. 高度定制化图表的开发

在项目中，常常需要实现一些复杂的图表，例如：

  • ​高度定制的地图：通过ECharts的地理坐标系功能，结合GeoJSON数据，实现了区域划分、热力图、路径轨迹等效果。
  • ​流程图：使用G2的节点-边模型，实现了业务流程的可视化展示，支持动态交互和自定义样式。
  • ​关系图：通过ECharts的关系图功能，展示了复杂的数据关系，支持节点拖拽、缩放等交互操作。

        这些复杂图表的实现，不仅提升了数据的可读性，也为用户提供了更直观的分析工具

2.1 高度定制的地图

        使用ECharts的geo组件，结合自定义的GeoJSON数据，实现了高度定制的地图展示。

        准备一个自定义的 GeoJSON 文件 china.json，将其放在 public 目录下，或者直接导入到项目中。

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import customGeoJSON from "./china.json"; // 导入自定义的 GeoJSON 数据

const CustomMap: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);

      // 注册自定义的 GeoJSON 数据
      echarts.registerMap('customMap', customGeoJSON);

      const option: echarts.EChartsOption = {
        geo: {
          map: 'customMap', // 使用注册的自定义地图
          roam: true, // 允许缩放和拖拽
          label: {
            show: true, // 显示地图标签
          },
          itemStyle: {
            areaColor: '#e7f3fd', // 区域颜色
            borderColor: '#2979ff', // 边框颜色
          },
          emphasis: { // 高亮状态下的样式
            itemStyle: {
              areaColor: '#2979ff', // 高亮区域颜色
            },
            label: {
              show: true,
              color: '#fff', // 高亮标签颜色
            },
          },
        },
      };

      chart.setOption(option);

      // 窗口大小变化时，调整图表大小
      const handleResize = () => {
        chart.resize();
      };
      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
        chart.dispose();
      };
    }
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '600px' }} />;
};

export default CustomMap;

案例展示：

官网地址：Documentation - Apache ECharts

2.2 流程图与关系图

        在一些业务流程展示的场景中，我们使用G2绘制了复杂的流程图和关系图。

2.3 安装 AntV 相关库

​X6​（流程图）：

npm install @antv/x6
npm install @antv/x6-react-shape

 实现流程图：

import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';

const FlowChart: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 创建图实例
    const graph = new Graph({
      container: containerRef.current,
      width: 800,
      height: 600,
      grid: true, // 显示网格
    });

    // 添加节点
    const source = graph.addNode({
      x: 40,
      y: 40,
      width: 80,
      height: 40,
      label: 'Start',
      attrs: {
        body: {
          fill: '#e6f7ff',
          stroke: '#1890ff',
        },
        label: {
          fill: '#000',
        },
      },
    });

    const target = graph.addNode({
      x: 240,
      y: 240,
      width: 80,
      height: 40,
      label: 'End',
      attrs: {
        body: {
          fill: '#ffccc7',
          stroke: '#ff4d4f',
        },
        label: {
          fill: '#000',
        },
      },
    });

    // 添加边
    graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#a3b1bf',
        },
      },
    });

    // 销毁图实例
    return () => {
      graph.dispose();
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />;
};

export default FlowChart;

案例展示

官网地址：https://x6.antv.antgroup.com/api/graph/grid

3. 自定义主题

3.1 DataV

        DataV 提供了丰富的可视化组件（如地图、图表、表格、文本、装饰元素等），用户可以通过拖拽式操作快速搭建数据大屏，无需编写复杂的代码。

官方网址：DataV

进入官网后，点击右上角的选择框架版本，这里我们选择react

3.2 安装DataV

npm install @jiaminghi/data-view-react

3.3 在组件内导入DataV

   全局导入



import * as datav from '@jiaminghi/data-view-react'


const Index: React.FC = () => {
    return(
        <>

            <datav.BorderBox1/>
 
        </>
    )
}

export default Index;

  按需导入

import React from "react";
import { BorderBox1 } from '@jiaminghi/data-view-react'

const Index: React.FC = () => {
 
    return(
        
        <>
            
            <BorderBox1/>
        </>
    )
}

export default Index;

效果展示：

4. 3D可视化绘图

4.1 Three.js 

        是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和显示 3D 图形。它简化了 WebGL 的复杂性，提供了更高层次的抽象，使得开发者可以更容易地创建复杂的 3D 场景、动画和交互。

官方网址：Three.js – JavaScript 3D Library

4.2 安装Three.js 

npm install three

4.3在组件内导入Three.js 

import * as THREE from 'three';

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const ThreeScene: React.FC = () => {
  const mountRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mountRef.current) return;

    // 场景
    const scene = new THREE.Scene();

    // 相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);

    // 几何体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();

    // 清理
    return () => {
      mountRef.current?.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={mountRef} />;
};

export default ThreeScene;

案例展示：

总结
        可视化数据大屏的开发，不仅需要掌握工具和技术，还需要结合业务需求进行深度定制。通过熟悉主流工具、实现复杂图表、定制化UI风格以及探索3D可视化，我成功交付了多个高质量的可视化项目。未来，我将继续探索更多前沿技术，为数据可视化领域带来更多创新实践。

希望这些优化建议对您有所帮助！如果您有其他需求，欢迎随时联系。

# 信息可视化 # 数据分析 # 数据挖掘 # 前端 # reactjs
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

大数据面试问答-数据湖

avatar 永洪数据分析社区
cover

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】4.4 异构数据源整合（CSV/JSON/Excel数据导入）

avatar 永洪数据分析社区
cover

Vue3携手Echarts，打造炫酷数据可视化大屏

avatar 永洪数据分析社区