<script src="echarts.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="traceProvinceOrder" style="width: 100%;height:400px;"></div>
<script>
function loadOneColumn() {
var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '月銷售分析'
},
tooltip: {},
legend: {
data: ['銷售分析']
},
xAxis: {
data: []
},
yAxis: {
splitLine: { show: false },//去除網格線
name: ''
},
series: [{
barWidth: "30px",
name: '銷售分析',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
//data: []
}]
});
myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
var names = []; //類別數組（實際用來盛放X軸坐標值）
var nums = []; //銷量數組（實際用來盛放Y坐標值）
$.ajax({
type: 'get',
url: '${base}/scripts/json.txt',//請求數據的地址
//url: '${base}/bd/bd_branch_info!getAllBranch.action',//請求數據的地址
dataType: "json", //返回數據形式為json
success: function (result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
$.each(result.list, function (index, item) {
names.push(item.department); //挨個取出類別並填入類別數組
nums.push(item.num); //挨個取出銷量並填入銷量數組
});
myChart.hideLoading(); //隱藏加載動畫
myChart.setOption({ //加載數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: '發布排行', //顯示在上部的標題
data: nums
}]
});
},
error: function (errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
});
};
loadOneColumn();
</script>
以上是用ajax請求數據進行動態渲染，數據返回格式為json：
{ "list":[ { "department":"和平區", "num":480 }, { "department":"河西區", "num":380 }, { "department":"河東區", "num":366 }, { "department":"河北區", "num":320 }, { "department":"南開區", "num":300 } ] }
——————————————————分割線—————————————————分割線——————————————————————————————-————
miniUI下的echarts
因為這個項目里，所有引入文件都被寫在header文件里了，在ftl文件引入無效，所有要找到控制header的文件，在里面改動，然后引入
html.append("\n<script type=\"text/javascript\" src=\"").append(base).append("/scripts/echarts.js\"></script>");
function search(){ var data; var year = date.getText() if (year==""){ mini.alert("請選擇時間") return } grid.load({ //這里用miniUI提供的查詢方法直接就可以查到值， 可以省去發送ajax的步驟，所以直接從官網搜來echarts的基本使用樣例 year:year, branch:mini.get("branchNo").getValue(), branchArea:mini.get("branchArea").getValue() },function(){ //要取到后台返回來的值 只能用這個寫法， 且上一歌{}內是發送過去的，這里的是返回來的 data = grid.getData(); //取到data console.log(data[0].sumSaleAmt9); //引入echarts var myChart = echarts.init(document.getElementById('traceProvinceOrder')); //console.log(myChart) var option = { title: { text: '月銷售報表' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { //這里是寫死了x軸的數量 data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] }, yAxis: {}, series: [{ //從返回來的數據中取到sumSaleAmt這個值，代表了從1-12個月的銷售額 name: '銷量', type: 'bar', data: [data[0].sumSaleAmt1,data[0].sumSaleAmt2,data[0].sumSaleAmt3,data[0].sumSaleAmt4,data[0].sumSaleAmt5,data[0].sumSaleAmt6,data[0].sumSaleAmt7,data[0].sumSaleAmt8,data[0].sumSaleAmt9,data[0].sumSaleAmt10,data[0].sumSaleAmt11,data[0].sumSaleAmt12] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); }) }