可视化数据大屏前景
在互联网行业,数据大屏是展示公司业务成果的重要工具,通过数据大屏可以直观地展现企业的各项业务指标、运营情况等,帮助用户快速了解公司的整体发展情况。
数据可视化也是讲述故事的重要组成部分。
更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。
怎么做可视化数据大屏？
对于很多企业而言,想要利用好大数据技术,首先需要对自身的企业架构和业务模式进行梳理,从而搭建起一个适合自身发展的数据体系。
可视化数据大屏实现大致需要以下几个步骤：
-
数据收集和处理 ：从不同的数据源获取相应的数据，如CSV文件、数据库、API等等，然后对这些数据进行处理，保证数据的准确性和可靠性。
-
界面设计 ：考虑数据大屏的基础框架和主题、设计布局等等，以确保用户能够顺利浏览和理解数据的内容和意义。
-
数据可视化 ：采用图表或其他可视化手段将数据呈现出来，如折线图、柱状图、饼状图、地图 等等。数据可视化能够更加准确地展示数据的趋势和关系，让数据更加直观明了。
-
技术选型 ：选择适合的框架或技术工具进行开发，如React、Vue、D3.js、Echarts等。根据具体的需求和预算确定选型。
-
数据更新和维护 ：对数据进行及时的更新和维护，保证数据随时能够反映最新的状态。
-
部署和测试 ：将数据大屏部署到选定的平台上，进行测试和优化。
-
持续改进 ：根据用户反馈和实际使用情况，持续优化和改进，提高数据大屏的质量和价值。以上是制作可视化数据大屏的简要步骤，具体实现需要根据实际需求进行调整和完善。
本文就简单说明如何利用react制作可视化数据大屏。
在react中如何制作可视化数据大屏
常用数据可视化图表库
echarts
官网地址：https://echarts.baidu.com/
特点：百度开源, 如果要在react项目中使用, 需要 下载echarts-for-react
AntV
官网地址：https://charts.ant.design/
特点：阿里开源
bizcharts
官网地址： https://bizcharts,net/products/bizCharts
特点：
- 基于react包装G2的开源库
- 需要额外下载 @antv/data-set
d3
官网地址：https://d3js.org.cn/
特点：国外的免费可视化图表库
我选择使用了echarts进行图表开发。
如果开发流程图，推荐使用AntV。 https://charts.ant.design/examples/flowchart/basic
在react中如何使用echarts进行图表开发
ECharts for React 简介
最简单、最好用的 ECharts 的 React 组件封装库。
对echarts进行的React封装，可以用于React项目中，支持JS、TS。
官网地址：https://git.hust.cc/echarts-for-react/
安装echart、echarts-for-react
npm install echarts --save
npm install --save echarts-for-react
或者
yarn add echarts echarts-for-react
在相应组件中引入模块
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
使用
使用的时候非常简单，用的时候只需要在官网找到你需要的的模板，将里面的option里的代码复制在下方你自己写代码里的option里，根据需求改变相应的数据。
官网： https://echarts.apache.org/zh/index.html
案例展示： https://echarts.apache.org/examples/zh/index.html
案例展示：柱状图
官网地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-background
必须要的代码
import React,{Component}from 'react'
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
export default class Pie extends Component {
let option = {
//粘贴上面复制过来的代码
};
render() {
return (
<div>
<ReactEcharts option={option}/>
</div>
)
}
}
全部代码
import React from "react";
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
export default function Bar() {
const option1 = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
return <div> <ReactEcharts option={option1} /></div>;
}
展示结果：
在开发过程中，经常会遇到各种数据处理，我们可以用到的一个很常用的工具库就是lodash。
lodash是对各种方法、函数的封装，使得使用更加方便，具体的使用方法可以参见lodash官网中的介绍。
lodash操作数据
中文官网 https://www.lodashjs.com/
英文官网 https://lodash.com/
github地址 https://github.com/lodash/lodash
通过 npm：
安装
$ npm i -g npm
$ npm i --save lodash
通过 yarn：
$ yarn add lodash
项目中引入
import _ from 'lodash'
项目中使用
更多使用方法可以参见lodash官网中的介绍，此处仅介绍一个使用方法。
处理数据 – 使用groupBy函数。
_.groupBy(collection, [iteratee=_.identity])
创建一个对象，key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。
分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。
每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数： (value)。
参数
- collection (Array|Object): 一个用来迭代的集合。
[iteratee=_.identity](Array|Function|Object|string): 这个迭代函数用来转换key。
返回
(Object): 返回一个组成聚合的对象。
例子
_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }
页面布局
页面布局，可以使用antd的 Grid栅格来实现。
地址： https://ant.design/components/grid-cn
完整案例
import React, { useEffect, useState } from "react";
import {Col, Row} from "antd";
import _ from "lodash";
import {
fetchGetViewsDescNewsList,
fetchGetBarChartNewsList,
} from "../../utils/api";
// 引入图表组件
import Bar from "../../components/echarts/bar/Bar";
import Pie from "../../components/echarts/pie/Pie";
import { reactLocalStorage } from "reactjs-localstorage";
export default function HomeIndex() {
const [BarChartData, setBarChartData] = useState(null);
const [PieSeriesDataList, setPieSeriesDataList] = useState(null);
// 获取柱状图数据
const loadBarChartData = async () => {
let obj = {
publishState: 2,
};
const BarChartData = await fetchGetBarChartNewsList(obj);
// 解析柱状图
setBarChartData(_.groupBy(BarChartData, (item) => item.category.title));
// 解析饼图
pieData(BarChartData);
};
useEffect(() => {
loadBarChartData();
}, []);
// 获取用户权限列表
const { username } = reactLocalStorage.getObject("token");
const pieData = async (data) => {
var currentList = data.filter((item) => item.author === username);
var groupObj = _.groupBy(currentList, (item) => item.category.title);
let list = [];
for (let key in groupObj) {
list.push({
name: key,
value: groupObj[key].length,
});
}
setPieSeriesDataList(list);
};
return (
<div>
<Row
gutter={16}
style={{
height: "400px",
}}
>
<Col span={10}>
{!!BarChartData && (
<Bar title="新闻分类图示" legendText="数量" data={BarChartData} />
)}
</Col>
<Col span={14}>
{!!PieSeriesDataList && (
<Pie
title="新闻分类图示"
legendText="数量"
SeriesDataList={PieSeriesDataList}
/>
)}</Col>
</Row>
</div>
);
}
Bar.js
import React from "react";
import * as echarts from "echarts";
import ReactEcharts from "echarts-for-react";
export default function Bar(props) {
const option1 = {
title: {
text: props.title,
left: "left",
},
legend: {
data: [props.legendText],
},
xAxis: {
type: "category",
data: Object.keys(props.data),
axisLabel: {
interval: 0,
rotate: 30
},
},
yAxis: {
type: "value",
minInterval: 1
},
series: [
{
name: props.legendText,
data: Object.values(props.data).map(item=>item.length),
type: "bar",
},
],
};
return (
<div>
<ReactEcharts style={{width: '100%'}} option={option1} />
</div>
);
}
Pie.js
import React from "react";
import * as echarts from "echarts";
import ReactEcharts from "echarts-for-react";
export default function Pie(props) {
const option1 = {
title: {
text: props.title,
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "Access From",
type: "pie",
radius: "50%",
data: props.SeriesDataList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
return (
<div>
<ReactEcharts
style={{ width: "500px", height: "300px" }}
option={option1}
/>
</div>
);
}
最终展示结果
总结
- 可视化数据大屏展示方式很多，但是数据是核心，建议看一下lodash。会节省很多时间。
- react+echarts+antd 是一个比较不错的选择
- 具体实现方式可能得根据具体业务去分析，没有万能的解决方案。
参考地址：
- https://blog.csdn.net/qq_44417271/article/details/115050325
- https://echarts.apache.org/zh/index.html
- https://www.bilibili.com/read/cv22298027
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
