前一段時間碰到了一個小功能，利用echarts餅圖顯示數據庫中部門員工的值，我們使用的java框架是 jfinal 。
話不多說先看效果圖吧。
引入JS文件：echarts.min.js echarts.js jquery.min.js
html代碼：<div id="echarts" style="width: 600px; height: 600px; margin: 0 auto;"></div>
js代碼：function loadOneColumn() {
// 基於準備好的dom，初始化echarts實例
var myeChart = echarts.init(document.getElementById('echarts'));
// 指定圖表的配置項和數據
myeChart.setOption({
title: {
text: '崗位員工人數展示',
// subtext: '崗位員工人數',
x:'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true }, // 數據視圖工具，可以展現當前圖表所用的數據
restore: { show: true }, // 配置項還原
saveAsImage: { show: true } // 把圖表保存爲圖片
}
},
series: [{
name: '員工人數',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: []
}]
});
myeChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
var names = []; //類別數組（用於存放餅圖的類別）
var brower = [];
$.ajax({
type: 'post',
url: '/admin/echarts/selectEcharts',//請求數據的地址
dataType: "json", //返回數據形式爲json
success: function (result) {
//請求成功時執行該函數內容，result即爲服務器返回的json對象 result.list,
$.each(result, function (index,item) {
names.push(item.name); //挨個取出類別並填入類別數組
brower.push({
name: item.name,
value: item.value
});
});
myeChart.hideLoading(); //隱藏加載動畫
myeChart.setOption({ //加載數據圖表
legend: {
data: names
},
series: [{
data: brower
}]
});
},
error: function (errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myeChart.hideLoading();
}
});
};
loadOneColumn();
js部分代碼完畢。legend 裏面的data顯示的是有哪些部門，series 裏面的data接收的是從後臺傳過來的json數據。
data數據格式：[{name: "會計組", value: 1}, {name: "系統集成組", value: 1}, {name: "軟件開發組", value: 12}]
java 代碼很簡單，只需要返回數據庫的值就行了。 renderJson(Db.find(sql));
拓展：
toolbox(工具欄)學習。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。 最主要的是 feature。
下面來分別介紹這五個工具
saveAsImage：這個工具可以把圖表保存爲圖片。裏面有些常用的參數，type->保存圖片的格式，
name->保存文件的名字，backgroundColor->保存圖片的背景色，
show->是否顯示該工具，還有一些別的屬性可以自己再使用的時候查詢API文檔。
restore：配置項還原。主要屬性是show->是否顯示該工具。dataView：數據視圖工具，可以展現當前圖表所用的數據，編輯後可以動態更新。show->是否顯示該工具，
readOnly->是否不可編輯，optionToContent->自定義 dataView 展現函數，
用以取代默認的 textarea 使用更豐富的數據編輯。可以返回 dom 對象或者 html 字符串，
backgroundColor->數據視圖浮層背景色。
dataZoom：數據區域縮放。目前只支持直角座標系的縮放（這裏的含義就是柱狀體，折線圖可以縮放，
但是像餅狀圖就不能縮放）。show->是否顯示該工具。
magicType：動態類型切換。show->是否顯示該工具，type->這是個數組，啓用的動態類型，
包括'line'（切換爲折線圖）, 'bar'（切換爲柱狀圖）, 'stack'（切換爲堆疊模式）, 'tiled'（切換爲平鋪模式）。
代碼部分：
toolbox: { //可視化的工具箱
show: true,
feature: {
dataView: { //數據視圖
show: true
},
restore: { //重置
show: true
},
dataZoom: { //數據縮放視圖
show: true
},
saveAsImage: {//保存圖片
show: true
},
magicType: {//動態類型切換
type: ['bar', 'line']
}
}
}
第一次使用echarts，不好的地方請多指教。
源代碼地址： https://download.csdn.net/download/evloutionplus/10446331