課程介紹

專案示範

數據視覺化概念

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調整

前端項目_銷售趨勢圖表_切換圖表的實現

前端項目_銷售趨勢圖表_解析度適配

前端項目_商家地圖分佈_顯示地圖

前端項目_商家地圖分佈_顯示散點

前端項目_商家地圖分佈_UI調整

前端項目_商家地圖分佈_解析度適配

前端項目_商家地圖分佈_地圖點擊效果

前端項目_銷售排行圖表_基本圖表的顯示

前端專案_銷售排行圖表_UI調整

前端項目_銷售排行圖表_平移動畫效果

前端項目_銷售排行圖表_解析度適配

前端項目_熱銷商品佔比_基本圖表的顯示

前端專案_熱銷商品佔比_資料的切換

前端專案_熱銷商品佔比_UI調整

前端項目_熱銷商品佔比_解析度適配

前端項目_庫存銷售模組_基本圖表的顯示

前端項目_庫存銷售模組_UI調整

前端項目_庫存銷售模組_切換動畫

前端項目_庫存銷售模組_解析度適配

WebSocket的基本使用_後端

WebSocket的基本使用_前端

後端專案的改造

前後端資料欄位的約定

後端接收資料時的處理

前端程式碼改造_連接伺服器

前端程式碼改造_處理接收的數據

前端程式碼改造_組件的改造

前端程式碼改造_優化

細節處理_組件合併

細節處理_全螢幕切換_佈局樣式

細節處理_全螢幕切換_點擊事件的處理

細節處理_全螢幕切換_連動效果

細節處理_主題切換_圖表主題

細節處理_主題切換_定義數據

細節處理_主題切換_原生HTML的切換

細節處理_主題切換_連動效果