使用ECharts實現數據圖表分析
阿新 • • 發佈：2017-06-07
.ajax http dom 事業 javascrip con text ble table
| 一、ECharts介紹 |
實現對統計數據的圖形分析之前用過JFreeChar，但它是用純java實現編碼繁瑣且效果不佳，後來又使用過Fusioncharts 報表工具，它是基於Flash的圖表組件、以XML為數據、提供豐富的Flash動畫作為圖標模板，實現簡單效果不錯但flash是老東西了且瀏覽器需要flash插件的支持，更關鍵的是手機端瀏覽器基本上不支持。最近看到百度提供一套ECharts（Enterprise Charts）商業產品圖表庫，它是基於ZReader（一個全新的輕量級canvas類庫），可在pc和移動端流暢的運行，支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）等12類圖表。
| 二、實現應用案例 |
下面就結合應用看看ECharts的使用
案例效果：
條形圖
切換折線圖
查看圖形數據
| 三、如何使用ECharts |
1、環境搭建
下載echarts-2.2.2,官網地址：http://echarts.baidu.com/
將build\dist目錄下的內容拷貝到項目中 如圖所示：
2、在sell_char.html頁面中引入文件
chart目錄下存放了12種圖形的js文件，可根據需要引入，這也是官方推薦的導入方式（模塊化單文件引入）
<head>
<script src="echarts/dist/echarts.js"></script>
<script src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){//jquery的文檔就緒函數
// 路徑配置
require.config({
paths: {
echarts: ‘echarts/dist‘
} });
require(
[
‘echarts‘,//代指echarts設置的路徑，即‘echarts/dist‘
‘echarts/chart/bar‘, // 使用柱狀圖加載bar模塊，引入bar.js
‘echarts/chart/line‘//加載折線圖,引入line.js文件, 按需加載
]，
function (ec) {
var myChart = ec.init(document.getElementById(‘sell_data‘));
var option = { //配置選項，使用echarts的關鍵部分
...
}
myChart.setOption(option);
});
</script>
</head>
<!-- 為ECharts準備一個具備大小的區域，必須指定高度 -->
<div id="sell_data" style="height:400px"></div>
3、sell_char.html完整的代碼
<!-- ECharts單文件引入 -->
<script src="echarts/dist/echarts.js"></script>
<script src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//獲得後臺數據
var category_data;//類型信息
var soft_data;//軟件部銷售數據
var net_data;//網絡部銷售數據
var mobile_data;//移動事業部銷售數據
$.ajax({
url:‘/21-sun/echarts/EChartsDataServelt‘,
async:false,
success: function(data){
category_data=data.category;
soft_data=data.soft_data;
net_data=data.net_data;
mobile_data=data.mobile_data;}
})
// 路徑配置
require.config({
paths: {
echarts: ‘echarts/dist‘
}
});
require(
[
‘echarts‘,
‘echarts/chart/bar‘, // 使用柱狀圖就加載bar模塊，按需加載
‘echarts/chart/line‘
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById(‘sell_data‘));
var option = {
tooltip: {//提示框，鼠標懸浮交互時的信息提示
show: true
},
toolbox:{//定義工具按鈕
show : true,
feature : {
dataView : {show: true, readOnly: false},//數據信息按鈕
magicType : {show: true, //顯示折線、柱狀圖等切換按鈕
type: [‘line‘, ‘bar‘,‘stack‘, ‘tiled‘]}
}
},
legend: {//圖例
data:[‘軟件部‘,‘網絡板塊‘,‘移動事業部‘]
},
xAxis : [//x軸設置
{
type : ‘category‘,//x軸顯示類別
data : category_data //["第一季度","第二季度","第三季度","第四季度"]
}
],
yAxis : [//y軸設置
{
type : ‘value‘ //y軸顯示數據值
}
],
series : [
{
"name":"軟件部",
"type":"bar",
"data":soft_data //[80, 300, 200, 100]
},
{
"name":"網絡板塊",
"type":"bar",
"data":net_data //[50, 200, 120, 200]
},
{
"name":"移動事業部",
"type":"bar",
"data":mobile_data //[20, 60, 30, 15]
}
]
};
// 為echarts對象加載數據
myChart.setOption(option);
}
);
});
</script>
</head>
<body>
<div id="sell_data" style="height:400px"></div>
<!-- ECharts單文件引入 -->
</body>
</html>
4、後臺EChartsDataServelt代碼
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json; charset=utf-8");
JSONObject jsonObj=new JSONObject();
//後臺數據，這裏給定數據就不從數據庫獲取了
Map map=new HashMap();
map.put("category", new String[]{"第一季度","第二季度","第三季度","第四季度"});
map.put("soft_data", new int[]{80, 300, 200, 100} );
map.put("net_data", new int[]{50, 200, 120, 200});
map.put("mobile_data",new int[]{20, 60, 30, 15});
jsonObj.putAll(map);
response.getWriter().println(jsonObj.toString());
}
想要了解更多內容的小夥伴，可以點擊查看源碼，親自運行測試。
使用ECharts實現數據圖表分析