數據charts圖可配置化(一)

以前作公司的數據展現需求，製做了一個可視化系統。 該系統美其名曰是可視化，不過說到底不過是echarts圖展現的配置化工具罷了。

這裏放幾張效果圖

需求

可建立菜單

可建立小組

可動態拖拽charts圖，自定義位置信息

可選擇圖表類型，經過圖表類型選擇展現須要展現的圖表。其中主要包括（折線、柱狀、餅圖、散點、雷達、表格、文字、數字、折線柱狀組合圖、柱狀堆疊、漏斗、地圖等類型）

輸入sql返回數據，從而配置數據

這裏講一些通用化的配置

技術棧

vue + vue-router + vuex

echarts

插件

axios

axios請求插件，不過多贅述

echarts

echarts是百度的圖表展現插件，詳情能夠點擊echarts

element-ui

element-ui後臺UI庫

js-cookie

js-cookie是cookie插件,如今github應該有12k+star

node-sass

normalize.css

樣式初始化

vue-avatar

用戶頭像生成

vue-grid-layout

容器拖拽組件

圖表功能

x軸

首先折線圖、散點圖、柱狀圖x軸的數據來源，x軸能夠是數值軸，也能夠是時間軸。不過大多數的狀況都是數值軸，由於後臺的時間來源通常會成爲其主要來源。

y軸

y軸通常都是value類型。但y軸也有可能存在單位（如%）一說，因此能夠添加在浮層或者其label。

標題

標題的輸入

位置

圖顯示的位置信息