从0到1设计通用数据大屏搭建平台

//vw vh单位 w3c的官方解释 vw：1% of viewport’s width vh：1% of viewport’s height//例如，设计稿的宽度为1920px，则1vw=19.2px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是5.208vw=100px。body,html {     font-size:5.208vw}

//监听窗口的oversize事件，来动态计算根节点字体大小，再配合rem做适配(function(doc, win) {    const docEl = doc.documentElement    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'    const recalc = function() {      let clientWidth = docEl.clientWidth      if (!clientWidth) return      docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'    }    if (!doc.addEventListener) return    win.addEventListener(resizeEvt, recalc, false)    doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window)

// 基于设置的设计稿尺寸 换算对应的宽高比useEffect(() => {    const wR = boxSize.width / viewWidth;    const hR = boxSize.height / viewHeight;     setBgScaleRatio(wR);    setBgHeightScaleRatio(hR);}, [boxSize, viewWidth, viewHeight]); //根据等宽、等高、全屏等不同的缩放比例 计算scale值const getScale = (proportion, x, y) => {    if (proportion === 'radioWidth') {        return `scaleX(${x})`    }    if (proportion === 'radioHeight') {        return `scaleY(${y})`    }    return `scale(${x}, ${y})`}

// initialization echartsconst renderNewEcharts = () => {    // 1. new echarts instance    const echartObj = updateEChartsOption();    // 2. bind events    bindEvents(echartObj, onEvents || {});    // 3. on chart ready    if (typeof onChartReady === 'function') onChartReady(echartObj);    // 4. on resize    echartObj.resize();}; // bind the eventsconst bindEvents = (instance, events) => {    const _bindEvent = (eventName, func) => {       instance.on(eventName, (param) => {           func(param, instance);       });    };     // loop and bind    for (const eventName in events) {        if (Object.prototype.hasOwnProperty.call(events, eventName)) {            _bindEvent(eventName, events[eventName]);        }    }}; // dispose echarts and clear size-sensorconst dispose = () => {    if ($chartEl.current) {       clear($chartEl.current);       // dispose echarts instance       (echartsLib || echarts).dispose($chartEl.current);    }};

const DataV: React.FC<DataVProps> = (props) => {    const { config } = props;    const [renderCounter, setRenderCounter] = useState(0);    const $dataVWarpEl = useRef(null);    const $componentEl = useRef(null);     useEffect(() => {        // 绑定容器size监听        const resizefunc = debounce(() => {            $componentEl.resize();        }, 500)       // fixme       addResizeListener($dataVWarpEl.current, resizefunc);       return () => {           // 清除订阅           removeResizeListener($dataVWarpEl.current, resizefunc);       };    }, []);     return (        <DataVWarp ref={$dataVWarpEl}>            <CompRender config={config} ref={$componentEl} />        </DataVWarp>    );};

{    headerGroupName: '公共配置',                         //配置所属类型    headerGroupKey: 'widget',                           //配置所属类型key值 相同的key值都归属一类    name: '标题名称',                                    //属性名称    valueType: ['string'],                              //属性值类型    optionLabels: [],                                   //服务下拉列表、多选框等控件的标签名    optionValues: [],                                   //服务下拉列表、多选框等控件的标签值    tip: false,                                         //配置项的 Tooltip 注解    ui: ['input'],                                      //使用的控件类型    class: false,                                       //控件类名，定制控件样式    css: { width: '50%'},                               //修改控件样式    dependencies: ['widget,title.show,true'],           //属性之间的联动，规则['配置所属类型, 属性key, 属性值']    depContext: DepCommonShowState,                     //属性之间的校验回调方法    compShow: ['line'],                                 //哪些组件可配置    dataV: { key: 'title.text', value: '' },            //配置的key值和默认value值},

// 每次拖拽时zIndex要在当前最大zIndex基础上 + 1，并返回给组件使用const getAfterMaxZIndex = useCallback(i => {    if (i === curDragItemI) {        return;    }    setCurDragItemI(i);    setMaxZIndex(maxZIndex => maxZIndex + 1);    return maxZIndex;}, []);