$(document).ready(function () {
var myChart = echarts.init(document.getElementById(‘main‘), ‘westeros‘);
function main(chartData) {
var delayAvg = []; //延遲完成數組
var completedAvg = []; //按時完成數組
for (var i = 0; i < chartData.delayDayList.length; i++) {
if (chartData.delayDayList[i] >= 0) {
completedAvg.push(null);
delayAvg.push(chartData.delayDayList[i]);
} else {
completedAvg.push(chartData.delayDayList[i]);
delayAvg.push(null);
}
}
var option = {
color: [‘#3398DB‘],
tooltip: {
show: false,
trigger: ‘axis‘,
axisPointer: {
type: ‘shadow‘
}
},
grid: {
x: 58,
y: 48,
x2: 53,
y2: 95,
containLabel: false
},
xAxis: [
{
type: ‘category‘,
data: chartData.nodeTileList,
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
fontSize: 12,
color: ‘#000‘
},
formatter: function (par) {
return par;
},
interval: 0 //類目全顯
//rotate: 90 //順時針旋轉45度
}
}
],
yAxis: [
{
type: ‘value‘
}
],
"dataZoom": [
{
"show": false,
"height": 30,
"xAxisIndex": [0],
bottom: 20,
"start": 0,
"end": 250,
handleIcon: ‘path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z‘,
handleSize: ‘110%‘,
handleStyle: {
color: "#d3dee5"
},
textStyle: {
color: "#000"
},
borderColor: "#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}
],
series: [
{
name: ‘延遲完成‘,
type: ‘bar‘,
barWidth: ‘40%‘,
stack: ‘數量‘,
itemStyle: {
normal: {
label: {
show: true,
position: ‘top‘,
formatter: function (par) {
if (par.data >= 0) {
return par.data;
} else {
return "";
}
},
textStyle: {
color: ‘#000‘
}
},
color: ‘rgb(168, 1, 6)‘
}
},
data: delayAvg
}, {
name: ‘已完成‘,
type: ‘bar‘,
stack: ‘數量‘,
barWidth: ‘40%‘,
itemStyle: {
normal: {
label: {
show: true,
position: ‘bottom‘,
formatter: function (par) {
if (par.data < 0) {
return par.data;
} else {
return "";
}
},
textStyle: {
color: ‘#000‘
}
},
color: ‘rgb(25, 107, 0)‘
}
},
data: completedAvg
}
]
};
myChart.on(‘click‘, function (param) {
var index = param.dataIndex;
_nodeId = chartData.flowNodeIdList[index];
var startTime = $("#txtStartTime").val(); //開始時間
var endTime = $("#txtEndTime").val(); //結束時間
window.open("/Statistical/ProjectNode/NodeAvgDelayList?flowNodeId=" + _nodeId + "&status=all&startTime=" + startTime + "&endTime=" + endTime);
});
//使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
};

//請求堆積圖數據AJAX
var ajaxGetStacke = function (startTime, endTime) {
$.ajax({
type: "get",
url: "/Statistical/ProjectNode/GetNodeProAvgDayResult?time="+new Date(),
data: { startTime: startTime, endTime: endTime },
dataType: "json",
success: function (data) {
if (data.Success === true) {
var result = data.results;
main(result);
}
},
error: function (error) {
console.log(error);
//parent.$.messager.layer.alert(‘提示‘, ‘模板節點規則信息獲取失敗！‘, ‘info‘);
return;
}
});
}
//第一次進頁面刷新調用
ajaxGetStacke(null, null);
//點擊統計調用
$("#subSta").click(function () {
var startTime = $("#txtStartTime").val(); //開始時間
var endTime = $("#txtEndTime").val(); //結束時間
ajaxGetStacke(startTime, endTime);
});
});

<div id="main" style="height: 460px; margin-bottom: 40px; background-color: #fff;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
</script>

echarts 柱狀圖