前言
近两年始终在做数据分析可视化的我的项目,我次要是负责可视化大屏编辑器和可视化组件的开发,因为历史起因技术栈用的是 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) // 更新以后选中组件配置项
实现计划的内容根本就是下面这些,下篇文章会写一些组件的动静加载, 优化,错误处理和大屏保留后的组件定制化