前言

近两年始终在做数据分析可视化的我的项目，我次要是负责可视化大屏编辑器和可视化组件的开发，因为历史起因技术栈用的是jQuery。自己也很喜爱这个我的项目于是在闲暇工夫把次要性能用React+ts实现了下，在这里做一个记录

编辑器次要性能是从左侧选中组件，拖入到两头画布。能够对画布中的组件进行挪动，缩放，旋转，通过右侧属性栏目设置组件款式和数据。redux中寄存大屏根底配置JSON和画布中所有组件JSON。这些操作都是批改redux中组件的对应的配置项

编辑器最终大略是上面这样。顶部操作按钮区域（保留，预览等），左侧组件列表区域，两头大屏画布区域，右侧组件属性设置区域

组件配置项

export interface Rect {  left?: number  top?: number  width: number  height: number}export interface Plugin {  url: string  name: string}export interface Data {  type: 'static' | 'api'  widgetData?: any  apiUrl?: string  loop?: number //s  ruler?: any //数据规定  displayForm: 'table' | 'codeEdit' //数据展现插件 表格，代码编辑器}export interface Widget {  name: string  plugin: Plugin  rect: Rect  rotate?: number  img: string  config: any  dataConfig?: Data}

大屏配置项

interface ScreenWidget {  widgetId: string  zIndex: number  children?: ScreenWidget[]}export interface Screen {  name: string  width: number  height: number  coverImage: string  scale: number  screenZoom: 'scaling' | 'Hscaling' | 'Wscaling' | 'phone' | 'none'  backgroundColor: string  backgroundImage: string  //大屏组件列表  screenWidget: ScreenWidget[]  //大屏组件层级  widgetIndex: number  //选中组件id汇合  activeWidgets: string[]}

组件拖入

ahooks中的useDrop & useDrag，具体用法参考官网示例

组件挪动

react-moveable

刻度尺

ruler

组件挪动，参数设置批改redux中组件的对应的配置项

immutability-helper

设置参数时都是批改以后选中组件的配置，在设置时通过json门路设置

例如：批改柱状图第一个柱子的色彩，对应的门路是 config.bars.0.color

export const getObjByPath = (field: string, value: any) => {  let obj = {}  if (typeof field === 'undefined' || typeof value === 'undefined') {    return undefined  }  if (typeof field === 'string' && field.indexOf('.') === -1) {    obj[field] = { $set: value }    return obj  }  const ids = field.split('.')  let th = ''  for (let i = 0; i < ids.length; i++) {    th += "['" + ids[i] + "']"    if (!eval(`obj${th}`)) {      eval(`obj${th}={}`)    }  }  eval(`obj${th}={$set: value}`)  return obj}
import update from 'immutability-helper'const widget = getActiveWidget() //获取以后选中组件配置项const path = 'config.bars.0.color'const value = '#fff'const obj = getObjByPath(path, value) const newWidgetObj = update(widget, obj)setActiveWidget(newWidgetObj)  //更新以后选中组件配置项

实现计划的内容根本就是下面这些，下篇文章会写一些组件的动静加载,优化，错误处理和大屏保留后的组件定制化