<div id="mybarChartByTime" style="height: 300px"></div>
function functionName(data){
var serie = [];
for(var i = 0; i < data.length; i++){
var item = {
name:data[i].label,
type: 'bar',
itemStyle: {
normal: {
color: data[i].backgroundColor
}
},
data: data[i].data
}
serie.push(item );
};
return serie;
}
function timestartRateByTime() {
var datas = [];
var newdata_label = [];
$.ajax({
type: 'POST',
url: '/fudaMes/workShopOverview/getAllMachProduceStatusTimeDetail',
data: {
"t0": start,
"t1": end,
"type": "timeType"
},
success: function(data) {
data.pop();
//将所有状态组成一个新数组
var labelStr = '';
for (var i = 0; i < data.length; i++) {
labelStr += data[i].label + ','
}
labelStr = labelStr.substring(0, labelStr.length - 1);
newdata_label = labelStr.split(',');
var echartBar = echarts.init(document.getElementById('mybarChartByTime'));
echartBar.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
selectedMode: true,
legend: 'center',
data: newdata_label
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
title: {
line: 'Line',
bar: 'Bar',
stack: 'Stack',
tiled: 'Tiled'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
calculable: false,
xAxis: [{
name: '时间',
type: 'category',
nameTextStyle: {
fontSize: 8,
},
data: datas,
axisTick: {
show: true
},
splitLine: {
show: true
},
}],
yAxis: [{
name: '%',
type: 'value'
}],
series: functionName(data)
});
}
});
}效果：
