从零开发可视化大屏制作平台
几个月前开源的H5页面制作平台H5-Dooring收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.
你将收获可视化大屏产品设计思路
主流可视化图表库技术选型
大屏编辑器设计思路
大屏可视化编辑器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";importReact,{memo,useEffect,useRef}from"react";importstylesfrom"./index.less";import{IChartConfig}from"./schema";constXChart=(props:IChartConfig)=>{const{data,color,size,paddingTop,title}=props;constchartRef=useRef(null);useEffect(()=>{constchart=newChart({el:chartRef.current||undefined,pixelRatio:window.devicePixelRatio,//指定分辨率});//step2:处理数据constdataX=data.map(item=>({...item,value:Number(item.value)}));//Step2:载入数据源chart.source(dataX);// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴chart.interval().position("name*value").color("name");//Step4:渲染图表chart.render();},[data]);return(
