SmartChart的Git地址：https://gitee.com/smartchart/smartchart
在這里我只能說一句話 SmartChart開發團隊真厲害
配合Django來使用SmartChart
安裝smartchart，Python版本>=3.6，Django>=2.0
SmartChart和我們的admin是有關聯的，我們可以通過下載一個UI庫去美化我們admin頁面這個UI庫就是simpleui
# 安裝smartchart
pip install smartchart
# 安裝simpleui
pip install simpleui
安裝完成后需要去git上面拉取模版以及靜態文件
地址：https://github.com/JohnYan2017/SmartCharts
# 對應的項目目錄說明:
templates/echart -- 編輯器界面
templates/index -- 首頁Portal
static/echart -- 擴展前端數據處理函數(圖形編輯中可用)
static/editor -- 編輯器界面js
static/index -- Portal對應js, css
static/custom -- 你可以在此新建人個文件夾存放自定義css, js, image ..
Django項目中settings,py配置
# settings,py
INSTALLED_APPS = [
'simpleui', # 在導入初始化admin之前導入UI庫進行頁面的美化
'xxxxx',
'xxxx',
'xxx',
'smart_chart.echart', # 注冊app
]
# 注釋調MIDDLEWARE里面的
django.middleware.clickjacking.XFrameOptionsMiddleware
# 更改時區配置
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
# 指定靜態文件
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
## 若是注冊了 simpleui 這個樣式庫，同時也創建了一個儀表盤，這時候我們想把某個儀表盤放到我們admin的首頁就需要以下配置（用到時候打開）
# SIMPLEUI_HOME_PAGE = '/echart/?type=大數據李白' # type=的是儀表盤名稱，這個是自定義的，能和儀表盤名稱對應上去就行
在urls.py注冊路由
# urls.py
from django.urls import include # 導入include
from django.views.generic import RedirectView
urlpatterns = [
path('admin/', admin.site.urls),
path('echart/',include('smart_chart.echart.urls')), # 注冊一個圖表的路由
path('',RedirectView.as_view(url='echart/index/')), # 跳轉到chart的首頁
]
遷移及創建超級管理員
# 首先生成遷移文件並遷移
python manage.py makemigrations
python manage.py mifrate
# 創創建超級管理員
python manage.py createsuperuser
# 運行Django項目，訪問一下 下面這條路由進行數據初始化
http://127.0.0.1:8000/echart/init_db/
# 到此已經完成一個SmartChart項目的創建
創建儀表盤
到這里的時候小伙伴們都應該知道儀表盤是個什么東西了,不做過多介紹，SmartChart開發團隊真厲害。
可能會有地方需要激活碼，這個激活碼直接加群就可以獲取
初始化完成后會進入首頁，點擊下圖小人圖標或者另一個進入開發者模式
點擊我的關注，新增一個儀表盤。 注：一定要在開發者模式下進行
進入新增儀表盤詳情頁
箭頭所指，
歸屬項目默認連接可以自己創建一個歸屬的項目，並創建一個數據庫的一個鏈接，支持多種數據庫連接 。數據庫類型,如mysql,oracle,impala,gp,mssql,hive,redis,sqlite,python
創建完成后我們就會發現，在儀表盤的表中多出了一條數據，就是我們剛剛創建那條
點擊進入儀表盤的圖表頁
樣式及數據
邊框設計
多種邊框樣式提供選擇 SmartChart集成DataV
// 邊框樣式 dv-border-box- 后面跟的數字就是選擇樣式的類型
// 可根據上方 SmartChart集成DataV 進行參考一共十三個
<div class="col-xs-12 col-md-6" style="padding:0 0;height:50%;" >
<dv-border-box-11>
<div style="height:100%;padding:0.5% 0.5%;" id="container_{name}"></div>
</dv-border-box-11>
</div>
設置聯動
smartChart 設置聯動，是需要通過SQL語句來設置，這個下面詳細介紹
聯動是使用的sql語句接收的參數，這個sql語句是要寫在需要被聯動的圖表數據集中
/* where age='$age' */ 該語句中的 $至關重要切記勿忘
想要聯動的話，必須打開 "dv" 模式 也就是在高級中設置 {"dv":1}, 並根據下面語句進行聯動配置
上圖有個畫框的的參數
data[2]這個的獲取，就在網頁的開發者模式F12點擊Conlose再點擊數據，會有打印的數據信息，我們找到data所擁有的數據。配置完成后，就可以聯動了，也可以雙向聯動，這個同理，反過來配置就行了。
優點
- 圖表類型多，外觀炫酷
- 支持自定義數據，對數據的結構要求嚴格，格式必須統一
- 支持mysql,oracle,impala,gp,mssql,hive,redis,sqlite等主流數據庫
- 支持自定義訪問接口，如GET、POST請求
- 支持各圖表的，智能聯動，可以通過SQL配合設定
- 配置簡單，上手快，但是沒有精確的技術文檔