《專題課》數據可視化圖表ECharts

數據可視化圖表ECharts

本課程通過靜態數據可視化顯示講解到動態數據異步實現可視化顯示，課程採用標準MVC設計模式完成，數據交換使用fastjson。
在 series 中定義 type 類型有很多，那麼通過這個字段定義的操作將會顯示不同的圖表樣式。
Type 類型：常用的：line、bar、pie；
範例：修改 type 類型

series:{ 
  name:'成績', 
  type:'bar', 
  data:[99,89,98] 
} 

異步加載數據圖表顯示

 編寫 js 文件實現數據異步加載 
var pname = []; 
var stock = []; 
$.get('/EchartsProject/ProductServlet', {}, function (data) { 
    if (data) { 
        var obj = eval (data.product); 
        
console .log(obj); 
        for (var i = 0; i < obj.length; i++) { 
            pname.push(obj[i].pname); 
        } 
        for (var i = 0; i < obj.length; i++) { 
            stock.push(obj[i].stock); 
        } 
欣茂Java學院 答疑微信：kfylcto
欣茂科技 
        myEchart.setOption({ // 數據圖表加載
 
            xAxis: { 
                data: pname 
            }, 
            series: [{ 
                name: '庫存', 
                data: stock 
            }] 
        }) 
    } 
}, 'json') 
 加載路徑：/EchartsProject/ProductServlet