echarts(堆叠柱状图)
堆叠柱状图和dataZoom 组件 用于区域缩放的实现的一个实例,参数颜色是自己自定义的,可根据需要添加颜色
/**
* 获取上传率图表Option
*
* @param chart
* @param json
* json对象
* 格式例子:{"devices":[{"name":"已启用","data":[{"name":"UDP透传","value":48},{"name":"电信IoT","value":4}]},
* {"name":"已停用","data":[{"name":"UDP透传","value":10},{"name":"电信IoT","value":5}]},
* {"name":"其他","data":[{"name":"UDP透传","value":3853},{"name":"电信IoT","value":2}]}],
* "series":[{"name":"已上传","data":[{"name":"UDP透传","value":1},{"name":"电信IoT","value":0}]},
* {"name":"未上传","data":[{"name":"UDP透传","value":3900},{"name":"电信IoT","value":6}]}],
* "uprates":[{"name":"UDP透传","value":0.03},{"name":"电信IoT","value":0}]}
* @param serColors
* series颜色数组
* @param devColors
* devices颜色数组
* @param rateColor
* 上传率颜色
* @param chartTitle
* 图表标题
*/
function getUprateChartOption(json, serColors, devColors, rateColor, chartTitle) {
var maxValue = 0;
var series = [];
var legend = [];
var category = [];
// 上传率
var uprate = {
name : "上传率(%)",
type : 'line',
itemStyle : {
normal : {
color : rateColor
}
},
yAxisIndex : 0,
data : []
};
for (var j = 0; j < json.uprates.length; j++) {
uprate.data.push(json.uprates[j].value);
}
series.push(uprate);
// 上传数合计
var serTotal = {
name : "应上传数",
type : 'bar',
stack : 'ser',
label : {
normal : {
offset : [ '50', '800' ],
show : true,
position : 'insideBottom',
formatter : '{c}',
textStyle : {
color : '#0ea87a',
fontWeight : '600'
}
}
},
itemStyle : {
normal : {
color : 'rgba(128, 128, 128, 0)'
}
},
yAxisIndex : 1,
data : []
};
// 设备数合计
var devTotal = {
name : '设备总数',
type : 'bar',
stack : 'dev',
label : {
normal : {
offset : [ '50', '800' ],
show : true,
position : 'insideBottom',
formatter : '{c}',
textStyle : {
color : '#0ea87a',
fontWeight : '600'
}
}
},
itemStyle : {
normal : {
color : 'rgba(128, 128, 128, 0)'
}
},
yAxisIndex : 1,
data : []
};
for (var i = 0; i < json.series.length; i++) {
var obj = json.series[i];
legend.push(obj.name);
var serObj = {
name : obj.name,
type : 'bar',
barWidth : '40%',
itemStyle : {
normal : {
color : serColors[i % serColors.length]
}
},
label : {
normal : {
show : true,
position : 'inside',
textStyle : {
color : '#fff',
fontWeight : '600'
}
}
},
stack : 'ser',
yAxisIndex : 1,
data : []
};
for (var j = 0; j < obj.data.length; j++) {
if (i == 0) {
category.push(obj.data[j].name);
serTotal.data.push(obj.data[j].value);
} else {
serTotal.data[j] = serTotal.data[j] + obj.data[j].value;
}
serObj.data.push(obj.data[j].value);
}
series.push(serObj);
}
series.push(serTotal);
for (var i = 0; i < serTotal.data.length; i++) {
if (maxValue < serTotal.data[i]) {
maxValue = serTotal.data[i];
}
}
for (var i = 0; i < json.devices.length; i++) {
var obj = json.devices[i];
legend.push(obj.name);
var devObj = {
name : obj.name,
type : 'bar',
barWidth : '40%',
itemStyle : {
normal : {
color : devColors[i % devColors.length]
}
},
label : {
normal : {
show : true,
position : 'inside',
textStyle : {
color : '#fff',
fontWeight : '600'
}
}
},
stack : 'dev',
yAxisIndex : 1,
data : []
};
for (var j = 0; j < obj.data.length; j++) {
if (i == 0) {
devTotal.data.push(obj.data[j].value);
} else {
devTotal.data[j] = devTotal.data[j] + obj.data[j].value;
}
devObj.data.push(obj.data[j].value);
}
series.push(devObj);
}
series.push(devTotal);
for (var i = 0; i < devTotal.data.length; i++) {
if (maxValue < devTotal.data[i]) {
maxValue = devTotal.data[i];
}
}
var len = String(Math.floor(maxValue)).length;
var num = Math.pow(10, len - 1);
maxValue = Math.floor((maxValue + num) / num) * num;
var option = {
title : {
text : chartTitle,
textStyle : {
fontSize : '14'
},
bottom : '0',
x : 'center'
},
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle : {
align : 'left'
}
},
grid : {
left : '10',
right : '10',
bottom : '60',
containLabel : true
},
legend : {
data : legend
},
xAxis : [ {
type : 'category',
data : category,
axisLine : {
show : false
},
axisTick : {
show : false
}
} ],
yAxis : [ {
name : '上传率 (%)',
splitLine : {
show : false
},
min : 0,
max : 100,
type : 'value',
inverse : false,
axisLine : {
lineStyle : {
color : rateColor
}
}
}, {
name : '设备数',
type : 'value',
splitLine : {
show : true
},
axisLabel : {
formatter : '{value}'
},
max : maxValue
} ],
series : series
};
return option;
}
html图表渲染部分的使用
<div style="margin-top: 18px;">
<div id="proviceChart" style="width: 1100px; height: 400px;"></div>
<script>
$(document).ready(function() {
var proviceChart = echarts.init(document.getElementById('proviceChart'));
var proviceOption = getUprateChartOption(JSON.parse('${table.proviceChartData}'), uprateSerColors, uprateDevColors, uprateColor, "省份上传率图表");
proviceOption['dataZoom'] = [ {
type : 'slider',
show : true,
xAxisIndex : 0,
bottom : 26,
start : 70,
end : 100,
}, {
type : 'inside',
xAxisIndex : 0,
bottom : 26,
start : 70,
end : 100,
}, {
type : 'slider',
show : true,
yAxisIndex : [ 1 ],
right : 0
} ];
proviceChart.setOption(proviceOption);
proviceChart.hideLoading();
});
</script>
</div>记得自己去官网下载echarts.js 并引入,页面效果如图所示,datazoom组件可以拖动 x轴 y轴缩放图表内容
