gitee上的不錯(cuò)項(xiàng)目，基于vue實(shí)現(xiàn)的可拖拽的看板設(shè)計(jì)器可以自由搭配顏色和圖標(biāo)，開(kāi)發(fā)者可以只關(guān)注業(yè)務(wù)數(shù)據(jù)接口，前端不擅長(zhǎng)的人員可以直接輕松上手。

1.可支持的元素

文字，邊框，常見(jiàn)圖表，柱形圖，折線餅圖等等，還有一些列表數(shù)據(jù)，當(dāng)然還支持iframe嵌套，當(dāng)組件滿足不了的時(shí)候可以部分嵌套自己開(kāi)發(fā)的iframe。

2.布局自定義

可視化進(jìn)行元素拖拽布局，自行設(shè)計(jì)大小顏色等，對(duì)于分辨率自適應(yīng)做了不錯(cuò)的處理，可根據(jù)實(shí)際情況調(diào)整背景分辨率。

3.數(shù)據(jù)內(nèi)容填充

支持http接口數(shù)據(jù)動(dòng)態(tài)填充，根據(jù)格式開(kāi)發(fā)對(duì)應(yīng)數(shù)據(jù)接口即可，可設(shè)定刷新數(shù)據(jù)的輪詢周期，實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)化。

4.其他組件詳解

輪播列表：基于DataV的輪播表

輪播表 | DataV

支持多行列表數(shù)據(jù)的展示，支持自動(dòng)滾動(dòng)翻頁(yè)

[
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]

如果這些都不滿足，可以自行添加Iframe或者自己實(shí)現(xiàn)新組件來(lái)替代。

{"dimensions":["product","data1","data2"],"source":[{"product":"Mon","data1":120,"data2":130},{"product":"Tue","data1":200,"data2":130},{"product":"Wed","data1":150,"data2":312},{"product":"Thu","data1":80,"data2":268},{"product":"Fri","data1":70,"data2":155},{"product":"Sat","data1":110,"data2":117},{"product":"Sun","data1":130,"data2":160}]}

[{"name":"榮成","value":26700},{"name":"河南","value":20700},{"name":"河北","value":18700},{"name":"徐州","value":17800},{"name":"漯河","value":16756},{"name":"三門(mén)峽","value":12343},{"name":"鄭州","value":9822},{"name":"周口","value":8912},{"name":"濮陽(yáng)","value":6834},{"name":"信陽(yáng)","value":5875},{"name":"新鄉(xiāng)","value":3832},{"name":"大同","value":1811}]

{"point":[{"name":"北京","value":[116.405285,39.904989,200]},{"name":"鄭州","value":[113.665412,34.757975,888]},{"name":"青海","value":[101.778916,36.623178,666]},{"name":"寧夏回族自治區(qū)","value":[106.278179,38.46637,66]},{"name":"哈爾濱市","value":[126.642464,45.756967,101]}],"map":[{"name":"北京市","value":666},{"name":"河北省","value":98},{"name":"江蘇省","value":300},{"name":"福建省","value":1199},{"name":"山東省","value":86},{"name":"河南省","value":850},{"name":"湖北省","value":84},{"name":"廣西壯族自治區(qū)","value":81},{"name":"海南省","value":900},{"name":"青海省","value":800},{"name":"新疆維吾爾自治區(qū)","value":7}],"pieces":[{"gte":1000,"label":">1000"},{"gte":600,"lte":999,"label":"600-999"},{"gte":200,"lte":599,"label":"200-599"},{"gte":50,"lte":199,"label":"49-199"},{"gte":10,"lte":49,"label":"10-49"},{"lte":9,"label":"<9"}]}

以上就是該項(xiàng)目的大致內(nèi)容了，看板可以保存為模版進(jìn)行數(shù)據(jù)存儲(chǔ)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500810.html

到了這里，關(guān)于基于vue的可拖拽設(shè)計(jì)的報(bào)表看板設(shè)計(jì)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！