最近做專案接到新的需求,根據本身系統結構資料做一個圖形化展示,要求好看易用,有互動,就說了這麼多,然後就要求兩天給一版瞅瞅,MMP,真把前端當神了(你倒是把待遇提到神的地位啊...)
唉,吐槽歸吐槽,還得做,主要是丟不起這個臉....
言歸正傳,準備echarts,jquery,ui用的layui。
初始頁面效果圖:
預設展開系統與子系統。
效果分析:系統與子系統有子資料時,圖例渲染為實心圓,顏色不同區分,無子資料時為空心圓。
點選2級子系統空心圓時提示:
有資料時點選實心圓請求子系統下資料載入例項
然後點選某一個載入詳情檢視
,就是這樣的一個效果。。
後續有時間再更新,其他小夥伴有需要用到的可以私信我要完整版程式碼!!!!
彩蛋:
一個為重新整理還原按鈕,一個為儲存圖例為圖片的按鈕:效果槓槓的...