从零开发可视化大屏制作平台的方法教程

本篇文章为大家展示了从零开发可视化大屏制作平台的方法教程，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事网站制作、网站设计、企业网站建设、成都做手机网站、网页设计、品牌网站设计、网页制作、做网站、建网站。成都创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。

你将收获

• 可视化大屏产品设计思路

• 主流可视化图表库技术选型

• 大屏编辑器设计思路

• 大屏可视化编辑器Schema设计

• 用户数据自治探索

在介绍之前, 我们先看看实现的效果展示.

效果预览

方案实现

可视化大屏产品设计思路

目前很多企业或多或少的面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。

相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发,  数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控，动态一目了然。

针对以上需求, 我们设计了一套可视化大屏解决方案, 具体包含如下几点:

上图是笔者4个月前设计的基本草图, 后期会持续更新. 通过以上的设计分解, 我们基本可以搭建一个可自己定制的数据大屏.

主流可视化图表库技术选型

目前笔者调研的已知主流可视化库有:

• echart一个基于 JavaScript 的老牌开源可视化图表库

• D3.js一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

• antv包含一套完整的可视化组件体系

• Chart.js基于 HTML5 的 简单易用的 JavaScript 图表库

• metrics-graphics建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化

• C3.js通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易

我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择.

大屏编辑器设计思路

在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分:

• 组件库

• 拖拽(自由拖拽, 参考线, 自动提示)

• 画布渲染器

• 属性编辑器

如下图所示:

组件库我们可以用任何组件封装方式(react/vue等), 这里沿用H5-Dooring的可视化组件设计方式, 对组件模型进行优化和设计.

类似的代码如下:

import { Chart } from '@antv/f2'; import React, { memo, useEffect, useRef } from 'react';  import styles from './index.less'; import { IChartConfig } from './schema';  const XChart = (props:IChartConfig) => {   const { data, color, size, paddingTop, title } = props;   const chartRef = useRef(null);   useEffect(() => {       const chart = new Chart({         el: chartRef.current || undefined,         pixelRatio: window.devicePixelRatio, // 指定分辨率       });        // step 2: 处理数据       const dataX = data.map(item => ({ ...item, value: Number(item.value) }));        // Step 2: 载入数据源       chart.source(dataX);        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴       chart         .interval()         .position('name*value')         .color('name');        // Step 4: 渲染图表       chart.render();   }, [data]);   return (                     {title}