《专题课》数据可视化图表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