前言这两年一直在做数据分析和可视化项目。本人主要负责可视化大屏编辑器和可视化组件的开发。由于历史原因，技术栈采用jQuery。我也很喜欢这个项目，所以业余时间用React+ts实现了main功能。这里制作记录编辑器的主要作用是从左边选择组件，拖拽到中间的画布中。画布中的组件可以移动、缩放、旋转，还可以通过右侧的属性栏设置组件样式和数据。Redux存储了大屏的基本配置JSON和画布中所有组件的JSON。这些操作都是修改redux中组件对应的配置项编辑器。最后的结果大概是这样的。顶部操作按钮区（保存、预览等），左侧组件列表区，中间大屏画布区，右侧组件属性设置区组件配置项导出界面Rect{left?:numbertop?:numberwidth:numberheight:number}exportinterfacePlugin{url:stringname:string}exportinterfaceData{type:'static'|'api'widgetData?:anyapiUrl?:stringloop?:number//sruler?:any//dataruledisplayForm:'table'|'codeEdit'//数据展示插件表格，代码编辑器}导出界面Widget{name:stringplugin:Pluginrect:Rectrotate?:numberimg:stringconfig:anydataConfig?:Data}大屏配置项界面ScreenWidget{widgetId:stringzIndex:numberchildren?:ScreenWidget[]}exportinterfaceScreen{name:stringwidth:numberheight:numbercoverImage:stringscale:numberscreenZoom:'scaling'|}'缩放'|'缩放'|'电话'|'none'backgroundColor:stringbackgroundImage:string//大屏组件列表screenWidget:ScreenWidget[]//大屏组件级widgetIndex:number//选中的组件id集合activeWidgets:string[]}组件拖入hooksuseDrop&useDrag,for具体用法，参考官网samplecomponentmobilereact-moveable刻度尺组件移动，参数设置修改组件在redux中对应的配置项immutability-helper是设置参数时修改当前选中组件的配置，设置时通过json路径设置。例如：修改直方图中第一个列的颜色，对应路径为config.bars.0.colorexportconstgetObjByPath=(field:string,value:any)=>{letobj={}if(typeoffield==='undefined'||typeofvalue==='undefined'){returnundefined}if(typeoffield==='string'&&field.indexOf('.')===-1){obj[field]={$set:value}returnobj}constids=field.split('.')letth=''for(leti=0;i
