react+datav+echarts实现可视化数据大屏

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考

📓最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考。

📓效果如下

image.gif

1下载必要的框架

      📓 react路由

npm install react-router-dom  --save

image.gif

     📓  datav框架

npm  install @jiaminghi/data-view-react --save

image.gif

      📓         echarts

npm install echarts  --save

image.gif

2,路由设计

       📓在路由上,我是绑定一个index的路由作为组件,然后在index添加自适应的全局容器,当容器设置完成后,就在就在将其他的小的模块给一个个导入进来,

       2.1 在src文件夹下新建文件夹index,index里面新建文件index.jsx

       image.gif

       2.2 index.jsx里的代码内容如下

import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
export default function index() {
  return (
    <FullScreenContainer >  //我是datav的全局容器组件,自适应组件
      我是最外层的容器
    </FullScreenContainer>
  );
}

image.gif

       2.3 在app.js里,将index组件绑定我们的路由,这里要注意下 我用的路由是6版本 和5版本有点区别,这里我定义了一个根路由,然后重定向到index路由,index路由绑定我们的Index组件。

import React, { lazy, Suspense } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
const Index = lazy(() => import("./index/index.jsx"));
export default function App() {
  return (
    <div>
      <Suspense>
        <Routes>
          <Route path="/" element={<Navigate to="/index" />}></Route>
          <Route path="/index" element={<Index />}></Route>
        </Routes>
      </Suspense>
    </div>
  );
}

image.gif

2.4 查看效果

image.gif

       📓当出现该内容时,就代表着我们的基础架构已经搭建好 后续我们就要进行分块了

3.大屏分块

       📓我们在index.jsx里进行区域分块,代码如下    

import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
export default function index() {
  return (
    <FullScreenContainer class={style.box}>
      <BorderBox11 title="香蕉麻花皮测试" class={style.boxa}>
        <div className={style.box1}>
          <div>
            <div className={style.box2}>
            </div>
            <div className={style.box2}>
            </div>
            <div className={style.box2}>
            </div>
          </div>
          <div>
            <div className={style.box2}>
            </div>
            <div className={style.box3}>
            </div>
          </div>
          <div>
            <div className={style.box2}>
            </div>
            <div className={style.box2}>
            </div>
            <div className={style.box2}>
            </div>
          </div>
        </div>
      </BorderBox11>
    </FullScreenContainer>
  );
}

image.gif

       📓效果如下

  image.gif

4.当根据我们的思路进行分块后,后续我们就要进行对主容器的内容进行填充了

       4.1 我们创建 8个单独组件,这里我以home1 --  8 来进行命名,

        image.gif

              📓 在每个文件夹里新建一个index.jsx的文件

       image.gif

5.在小表格中使用echarts图表,并且渲染到主界面上

               📓我们需要在表格中渲染echarts,并且通过组件引入的方式把他加入到index的主容器当中

               📓小表格的代码如下

import React, { useState, useRef, useEffect } from "react";
import { BorderBox12 } from "@jiaminghi/data-view-react";
import * as echarts from "echarts";
import style from "../style.module.css";
export default function Indexdata() {
  const chartsNode = useRef(null);
  const [xdata,setxdata]= useState(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
  const [ydata,setydata]= useState([150, 230, 224, 218, 135, 147, 260])
  const mydata = () => {
    var myChart = echarts.init(chartsNode.current);
    var option;
    option = {
      xAxis: {
        type: "category",
        data: xdata,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: ydata,
          type: "bar",
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    mydata();
  });
  return (
    <BorderBox12 class={style.boxc}>
      <div ref={chartsNode} className={style.boxc}></div>
    </BorderBox12>
  );
}

image.gif

       📓引入到主体容器当众,并渲染到页面上

image.gif

       📓效果如下

image.gif

       📓我们在把其他的依次引入,代码如下:

import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
const Home1 = lazy(() => import("../home1/IndexData"));
const Home2 = lazy(() => import("../home2/index"));
const Home3 = lazy(() => import("../home3/index"));
const Home4 = lazy(() => import("../home4/index"));
const Home5 = lazy(() => import("../home5/index"));
const Home6 = lazy(() => import("../home6/IndexData"));
const Home7 = lazy(() => import("../home7/index"));
const Home8 = lazy(() => import("../home8/Index"));
export default function index() {
  return (
    <FullScreenContainer class={style.box}>
      <BorderBox11 title="香蕉麻花皮测试" class={style.boxa}>
        <div className={style.box1}>
          <div>
            <div className={style.box2}>
              <Home1 />
            </div>
            <div className={style.box2}>
              <Home2 />
            </div>
            <div className={style.box2}>
              <Home3 />
            </div>
          </div>
          <div>
            <div className={style.box2}>
              <Home4 />
            </div>
            <div className={style.box3}>
              <Home8 />
            </div>
          </div>
          <div>
            <div className={style.box2}>
              <Home5 />
            </div>
            <div className={style.box2}>
              <Home6 />
            </div>
            <div className={style.box2}>
              <Home7 />
            </div>
          </div>
        </div>
      </BorderBox11>
    </FullScreenContainer>
  );
}

image.gif

       📓效果图

image.gif

react的大屏开发还是挺简单的,和vue开发设计思路差不多,就框架的实现代码不一样,最后 贴出源码:

git@gitee.com:hu-wenwu/react-datav-echarts-view.git

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
2月前
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
93 5
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts英雄联盟可视化大屏(记得收藏)
Echarts英雄联盟可视化大屏(记得收藏)
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
|
3月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】智慧医疗可视化大屏(新手必用)
【Echarts大屏】智慧医疗可视化大屏(新手必用)
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
3月前
|
数据可视化
【Echarts大屏】智慧门店可视化大屏
【Echarts大屏】智慧门店可视化大屏
|
18天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
43 1
|
13天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
86 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
406 1
微信小程序使用echarts图表(ec-canvas)