一塊兒來作一個數據可視化，可拖拽的，高度自定義的圖表看板吧

時間 2019-11-26

標籤一塊兒來作一個數據可視化高度自定義圖表简体版

原文原文鏈接

前言

這個項目比較複雜，預計要分三部分來說，項目也還未完工，怕工期拖長了，前面忘了，這裏先作下記錄。html

項目在線體驗地址： chartshtml5

項目源碼地址在Library文件夾下：源碼node

項目用到的技術

react-dndreact

react-dnd-html5-backendwebpack

reactgit

echartsgithub

echarts-for-reactweb

數據結構

嵌套對象：外層對象的屬性是每一個圖表的id，內層對象保存圖表的各項屬性。api

長這樣：瀏覽器

chartsObj = {
    line1: {
        width: x,
        height: x,
        top: x,
        left: x,
    }
    ...
}
複製代碼

這裏使用的react的hook：useReducer建立的對象。

開始沒想到會有這麼多type，後面重構換成switch-case:

const [chartsObj, dispatch] = React.useReducer((state, action) => {
    const { id, left, top, active, type, width, height, view, value } = action
    if (type === 'move') {
        return { ...state, [id]: { ...state[id], left, top } }
    }
    if (type === "delete") {
        delete state[id]
        return { ...state }
    }
    if (type === 'activeClass') {
        Object.keys(state).map(item => {
            if (item === id) {
                state[item].active = true
                return item
            }
            state[item].active = false
            return item
        })
        return { ...state }
    }
    if (type === 'changeview') {
        return { ...state, [id]: { ...state[id], [view]: value } }
    }
    return { ...state, [id]: { id, type, active, left, top, width, height } }
}, {});
複製代碼

建立圖表

當點擊左側菜單欄時生成對應的基本圖表：相似點擊柱圖生成柱圖。

思路：

封裝對應圖表的echarts基本樣式。
當點擊item時，使用dispatch通知state作變動。
數據驅動視圖，生成對應的圖表。

實現：

這裏使用echarts-for-react將echarts引入項目中的，用過echarts的都知道， echarts主要的定義都在option屬性上, 咱們只要把定義好的option傳進去就ok了，不懂echarts的道友能夠先去echarts官網學習下，官網api很詳細： echarts

import ReactEcharts from 'echarts-for-react';

<ReactEcharts option={option} theme="Imooc" style={{ width: `${width}px`, height: `${height}px` }} ref={chartRef} /> 複製代碼

封裝好圖表以後，下一步就是點擊事件改變數據源，使用useReducer提供的dispatch：

const createChart = (item) => {
    switch (item.key) {
        case "lineBasic":
            dispatch({ type: 'lineBasic', id: `lineBasic${Object.keys(chartsObj).length}`, active: false, left: 20, top: 20, width: 300, height: 250 })
            break
        case "barBasic":
            dispatch({ type: 'barBasic', id: `barBasic${Object.keys(chartsObj).length}`, left: 20, top: 20, width: 300, height: 250 })
            break
        case "pieBasic":
            dispatch({ type: 'pieBasic', id: `pieBasic${Object.keys(chartsObj).length}`, left: 20, top: 20, width: 300, height: 250 })
            break
        default:
            return
    }
}
複製代碼

遍歷state，生成圖表：

{Object.keys(chartsObj).map(v => {
    const { left, top, id, type, active, width, height } = chartsObj[v]
    return (
        <Chart type={type} key={id} id={id} left={left} top={top} width={width} height={height} active={active} deleteChart={deleteChart} selectChart={selectChart} > </Chart>
    )
})}
複製代碼

支持拖拽

拖拽主要使用的react-dnd，也嘗試了react-beautiful-dnd, react-sortable-hoc，最後發現仍是react-dnd最強大。

使用react-dnd的道友必定注意，這裏有個大坑：引入react-dnd報錯，緣由是react-dnd插件內部也引入了react。若是和咱們的react版本不一致就會報錯。解決方法：

在webpack.config.js的resolve下配置下alias：

alias: {
    '@': paths.appSrc,
    react: path.resolve('./node_modules/react'),        //解決react兩個版本的問題
}
複製代碼

react-dnd依賴react-dnd-html5-backend作擴展，因此必須一塊兒安裝。

//app.js

import { useDrop, DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'


export default function RouteConfigExample () {
    return (
        <DndProvider backend={HTML5Backend}>

            <BrowserRouter>
                <Switch>
                    {RouteGlobal.map((route, i) => (
                        <RouteWithSubRoutes key={i} {...route} />
                    ))}
                </Switch>
            </BrowserRouter>
        </DndProvider>
        ...
        
複製代碼

在準備做爲拖拽區域的組件內：

const [, drop] = useDrop({
        accept: 'box',
        drop (item, monitor) {
            const delta = monitor.getDifferenceFromInitialOffset()
            const left = Math.round(item.left + delta.x)
            const top = Math.round(item.top + delta.y)
            moveBox(item.id, left, top)
            return undefined
        },
    })
    const moveBox = (id, left, top) => {
        dispatch({ type: 'move', id, left, top })

    }
    ...
    <div ref={drop} className="charts-middle">
        <Chart> </div 複製代碼

設置拖拽源：

const [{ isDragging }, drag] = useDrag({
        item: { id, left, top, type: 'box' },
        collect: monitor => ({
            isDragging: monitor.isDragging(),
        }),
    })
    
    ...
    
    <div
        ref={drag}
        style={{ ...style, left, top }}
    >
        <ReactEcharts option={option} theme="Imooc" style={{ width: `${width}px`, height: `${height}px` }} ref={chartRef} /> </div>
    
複製代碼

全屏操做

操做全屏主要用到了requestFullscreen 和 exitFullScreen兩個api，各個瀏覽器的兼容性不同：

const fullscreen = () => {
        let ele = document.querySelector('.charts-box')
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen();
        } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen();
        }
        setFullFlag(true)
    }
const exitFullscreen = () => {
    if (document.exitFullScreen) {
        document.exitFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    setFullFlag(false)
}
...

{
    fullFlag
        ?
        <Button className="charts-left-button" onClick={exitFullscreen}><Icon type="fullscreen-exit" /></Button>
        :
        <Button className="charts-left-button" onClick={fullscreen}><Icon type="fullscreen" /></Button>
}
...

複製代碼