課程介紹
專案示範
數據視覺化概念
ECharts的介紹
ECharts的快速上手
相關配置項的講解
長條圖的基本實現和常見效果
通用配置_title的相關配置
通用配置_tooltip的相關配置
通用配置_toolbox的相關配置
通用配置_legend的相關配置
折線圖的基本實現
折線圖的常見效果1
折線圖的常見效果2
散點圖的基本實現
散點圖的常見效果
直角座標系的常用配置grid
直角座標系的常用配置axis
直角座標系的常用配置dataZoom
圓餅圖的基本實現
圓餅圖的常見效果
地圖的基本實作和常見配置
地圖常見效果_顯示某個省份地圖
地圖常見效果_顯示空氣質量
地圖常見效果_地圖和散佈圖結合
雷達圖的實現
儀錶板的實現
ECharts基礎小結
主題的使用
調色盤和色彩漸層
直接樣式和高亮樣式的使用
圖表自適應的實現
圖表載入動畫的實現
圖表增量動畫的解說
圖表動畫的配置項
全域ECharts物件的常用方法1
全域ECharts物件的常用方法2
echartsInstance物件常用方法1
echartsInstance物件常用方法2
ECharts高級小結
Koa2的介紹
Koa2的快速上手
Koa2中介軟體的特點
後台專案_專案準備
後台專案_總耗時中間件的開發
後台專案_響應頭中間件的開發
後台專案_業務邏輯中間件的開發
後台專案_跨域配置
前端專案_專案的建立與準備
前端項目_商家銷售統計_元件結構與佈局結構
前端項目_商家銷售統計_圖表基本功能
前端項目_商家銷售統計_動態刷新的實現
前端項目_商家銷售統計_UI調整1
前端項目_商家銷售統計_UI調整2
前端項目_商家銷售統計_分割option
前端項目_商家銷售統計_解析度適配
前端專案_銷售趨勢圖表_通用程式碼結構
前端項目_銷售趨勢圖表_基本圖表的顯示
前端專案_銷售趨勢圖表_UI調整
前端項目_銷售趨勢圖表_切換圖表的實現
前端項目_銷售趨勢圖表_解析度適配
前端項目_商家地圖分佈_顯示地圖1
前端項目_商家地圖分佈_顯示地圖2
前端項目_商家地圖分佈_顯示散點
前端項目_商家地圖分佈_UI調整
前端項目_商家地圖分佈_解析度適配
前端項目_商家地圖分佈_地圖點擊效果
前端項目_銷售排行圖表_基本圖表的顯示
前端專案_銷售排行圖表_UI調整
前端項目_銷售排行圖表_平移動畫效果
前端項目_銷售排行圖表_解析度適配
前端項目_熱銷商品佔比_基本圖表的顯示
前端專案_熱銷商品佔比_資料的切換
前端專案_熱銷商品佔比_UI調整
前端項目_熱銷商品佔比_解析度適配
前端項目_庫存銷售模組_基本圖表的顯示
前端項目_庫存銷售模組_UI調整
前端項目_庫存銷售模組_切換動畫
前端項目_庫存銷售模組_解析度適配1
前端項目_庫存銷售模組_解析度適配2
WebSocket的基本使用_後端
WebSocket的基本使用_前端
後端專案的改造
前後端資料欄位的約定
後端接收資料時的處理
前端程式碼改造_連接伺服器
前端程式碼改造_處理接收的數據
前端程式碼改造_組件的改造
前端程式碼改造_優化
細節處理_組件合併
細節處理_全螢幕切換_佈局樣式
細節處理_全螢幕切換_點擊事件的處理
細節處理_全螢幕切換_連動效果
細節處理_主題切換_圖表主題
細節處理_主題切換_定義數據
細節處理_主題切換_原生HTML的切換
細節處理_主題切換_連動效果
數據視覺化專案使用最受歡迎的圖表引擎ECharts來展示電商平台中需要呈現的各方面的數據。用於更細緻的分析電商平台的運作情況,以便做出正確的決策。 此專案前端使用Vue技術棧，後端使用Koa2框架，前後端資料的交互採取WebSocket來確保資料的即時性。項目也支援主題切換, 展示酷炫的圖表效果.同時也能夠支援大螢幕和小螢幕的切換,保證了圖表在不同螢幕上呈現的效果。
