H5-Dooring，几个月前开源的H5页面制作平台，得到了很多热烈的反馈和交流。按照笔者之前的计划，我们又做了一个可视化大屏编辑器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'./架构';constXChart=(props:IChartConfig)=>{const{数据、颜色、大小、paddingTop、标题}=props;constchartRef=useRef(null);useEffect(()=>{constchart=newChart({el:chartRef.current||undefined,pixelRatio:window.devicePixelRatio,//指定分辨率});//第二步：处理数据constdataX=data.map(item=>({...item,value:Number(item.value)}));//第二步：加载数据源chart.source(dataX);//第三步：创建图形语法，绘制一个直方图，并通过genre和sold两个属性确定图表的位置，genre映射到x轴，sold映射到y轴图表.interval().position('name*value')。color('name');//第4步：渲染图表chart.render();},[data]);返回(
