1. 程式人生 > 實用技巧 >基於Echarts的微程式碼開發平臺SmartChart, 免費開源使用

基於Echarts的微程式碼開發平臺SmartChart, 免費開源使用

SmartChart是一個基於Echarts的微程式碼開發平臺

Django-smartchart是基於smartchart進行了簡化,可輕鬆應用於django,讓你專案頁面圖形定製非常方便

簡單, 敏捷, 高效, 通用化, 高度可定製化

為你完全打通前後端, 圖形資料聯動, 篩選開發毫無壓力

支援集木式的開發模式

我們讓簡單和通用化不再是個矛盾體

社群版開源免費使用

安裝使用說明:


pip install django-smartchart  #只支援最新版Python3.9.x
pip install django-smartchart==3.6  #支援python3.6.x

安裝完成後, 你可以直接在命令列輸入smartchart,即可啟動
訪問url: http://127.0.0.1:8000, 帳號密碼都是admin

你也可以在你的django專案中當作apps使用, 簡單配置一下, 你可以參考此demo
1. 在你的setting.py的INSTALL_APPS中加入'smart_chart.echart'
2. MIDDLEWARE 中註釋掉XFrameOptionsMiddleware
3. 將你的設定為中國時區, 支援中文基礎平臺建設!
    LANGUAGE_CODE = 'zh-hans'
    TIME_ZONE = 'Asia/Shanghai'
    USE_I18N = True
    USE_L10N = True
    USE_TZ = False
4. 在你的url.py中加入引用
from django.conf.urls import include
from django.views.generic import RedirectView
5. urlpatterns中加入路由
    path('echart/', include('smart_chart.echart.urls')),
    path('', RedirectView.as_view(url='echart/index/')),  #smartchart報表管理頁, 自行更改路由
6. 初始化DB, 命令列輸入: 
    python manage.py makemigrations
    python manage.py migrate
7. 建立管理員帳號, 如果已有可忽略
   python manage.py createsuperuser
8. 啟動服務
   python manage.py runserver
9. 訪問http://127.0.0.1:8000/echart/init_db/ 進行資料初始化

你就可以愉快的使用smartchart了

更多使用說明:

SmartChart designed for you

SmartChart是為你而生的一個產品, 你只需要使用通用開發技術就可以使用,無需學習特定的技能, 因為她的通用性, 所以讓你的知識不會因為改變而淘汰

因為她的靈活性, 你可以充分發揮你的智慧讓她變得非常的Smart

拋棄繁瑣的操作, 加速你的開發效率, 和BI產品相比, 如同Linux與Window的區別

她是一個數據集裝箱, 讓你非常方便的把資料組裝起來後, 可使用統一的介面對外服務,支援系統間嵌入,實時,快速定製化開發. 你也可以理解為資料中臺, 用視覺化提供統一資料服務. 這是一個面向開發人員的平臺, 實現資料的最後一公里

  • 開始使用smart chart, 您不需要任何專業知識, 無需coding, 選擇模組組裝即可!
  • 但如果要使用好smart chart, 建意瞭解下javascript, H5, Echart這些前端知識, 可以讓你的應用更加得心應手,創作更炫的效果
  • 如果你需要更進一步訂製你的資料, 你需要了解下SQL的使用,本專案高階應用語言都是通用的技能, 象js, h5,sql 學習成本低

入門視屏說明(下面文字很難理解, 先看視屏吧)

Smart Chart 基礎

主要分為 資料連線池, 資料集, 圖形格式, 頁面模板, 主題, 組裝盒(Dashboard)

  • (資料集+圖形格式) => 圖形(report)
  • (圖形report+report+...) + 頁面模板 + 主題 => Dashboard

一般企業應用

  • 資料連線池 + 資料集 => 統一資料介面 由 IT(資料建模工程師完成)
  • 圖形格式 + 頁面模板 + 組裝 => 統一視覺化介面 由資料分析師或業務完成

開發流程

資料分析師&業務 確定好需求, 進行頁面草圖設計, 提出資料需求給建模工程師, 完成資料介面後, 資料分析師&業務挑選圖形格式(含powerbi, tableau等BI產品), 模板進行組裝, 特殊展示需求對相應的code進行修改(js, html)

資料集

資料集可以理解為一個個的cube, 通過sql生成, 支援定時, 點頻, 實時重新整理的機制, 我們建意你用專業的工具開發sql 查詢, 如navicate,datagrip,hue
資料集的高階用法, 參考如下連結 資料集圖形對應關係
對於一般使用者來說, 無需瞭解如何生成資料集, 但建意瞭解以下資料集的常識
資料集統一向圖形傳遞資料的引數名為dataset, dataset是一個二維表結構, 如下

dataset = [
['時間','人口','發展','潛力'], 
['2018年', 12 , 10 , 9],
['2017年', 8  , 7  , 3],
......
]

圖形設定

smartchart內建了非常多的圖形, 可以直接拿來使用, 但是要定製自已的樣式, 建意稍作修改, 比如加上圖形, 更改tips, 標題等等, 具體修改方式, 請參考smartchart平臺樣列

如果你想進一步瞭解, 你可以參考 自定義圖形指南

PowerBI/Tableau嵌入的也虛擬成了圖形格式, 具體方式見另一文章

那接下來我們需要給圖形一個舞臺, 那就是模板,

模版

模版就是一個html頁面, 理論上來說, 你可以隨意發揮, 為了讓不太懂html的同學定製自已的模板, 我們提供了視覺化開發模板,設計好的code複製過去覆蓋這一塊程式碼即可, 如有其它需求可自行修改(前提你得稍微會點h5:tw-1f453: :tw-1f43e:)
每一個div對應一個DIV格式, 可以比喻成給圖形包一件衣服,我們會把圖形繫結到這個容器中,你可以用它來設定容器的樣式,如長寬高,邊距,邊框等等:

<div id="container_{name}" style="height:100%;"></div>

更多模板使用說明, 請參考: 模板指南

你也可以使用 視覺化設計工具 進行模板的開發
接下來只需要在dashborad中進行組裝就可以了

Dashboard

選擇你需要拼裝的資料集,對應的圖形,你也可以修改div, 讓他更適合當前頁面的需求, 選擇你喜歡的主題, 會自動應用到頁面

估計以讓說明你有點不知如何下手, 下面你可以STEP by STEP 的去嘗試, 建議先看最下方的視屏