H5-Dooring，几个月前开源的H5页面制作平台，得到了很多热烈的反馈和交流。按照笔者之前的计划，我们又做了一个可视化大屏编辑器DeviceV6.Dooring。接下来笔者就带大家看看我们的方案设计和技术实现。你将获得可视化大屏产品设计思路、主流可视化图表库技术选型、大屏编辑器设计思路、大屏可视化编辑器。SchemaDesign用户数据自主探索介绍之前，先来看看效果展示。效果预览方案实现了大屏产品设计思路的可视化。目前，很多企业或多或少都面临着“信息孤岛”的问题。各系统平台之间的通信数据无法交换和共享，难以实现数据的综合分析和实时呈现。与传统的图表、数据仪表盘人工定制相比，大屏可视化生产平台的出现，打破了定制开发与数据分散的对冲问题。通过数据采集、清洗、分析，直观的实时数据可视化，多方位、多角度、全景展示各项指标，实时监控，动态一目了然。针对以上需求，我们设计了一套可视化大屏解决方案，具体包括以下几点：上图是笔者4个月前设计的基础草图，后续会持续更新。通过以上的设计分解，我们基本可以搭建一个可以自己定制的数据大屏。主流可视化和图表库技术选型目前笔者研究的已知主流可视化库有：echart，一个老牌的基于JavaScript的开源可视化图表库，D3.js，一个数据驱动的可视化库，不需要其他任何框架在现代浏览器中独立运行，它结合了强大的可视化组件来驱动DOM操作antv包含一套完整的可视化组件系统Chart.js基于HTML5的简单易用的JavaScript图表库metrics-graphics建立在D3之上可视化库针对时间序列数据的可视化和布局进行了优化C3.js通过包装构建整个图表所需的代码，可以轻松生成基于D3的图表。我们可以使用以上任意一个库来实现我们的可视化大屏，大家可以根据自己的喜好来选择。大屏编辑器的设计思路通过上面的分析，我们知道大屏编辑器需要一个编辑器核心，主要包括以下几个部分：组件库拖拽（自由拖拽、参考线、自动提示）属性编辑器canvasrenderer如下图所示：我们可以使用组件库中的任何组件封装方式（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.当前||未定义，pixelRatio：window.devicePixelRatio,//指定分辨率});//step2:处理数据constdataX=data.map(item=>({...item,value:Number(item.value)}));//step2:加载数据源chart.source(dataX);//Step3：创建图形语法，绘制直方图，通过genre和sold两个属性确定图形的位置。Genre映射到x轴，sold映射到y轴chart.interval().position('name*value').color('name');//Step4:renderchartchart.render();},[data]);return(
