思路一:给series集合末尾多加一栏用于展示合计,但是值都是0;
缺点:必须根据xAxis的data生成一组为空的数据,且tooltip不能加trigger: ‘axis’,这个条件,不然会展示合计:0。
数据为模拟数据,已经实现ajax后台动态传数据,但这里不做细讲,主要研究echarts的js求和方法。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts1</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//定义图表option
var option = {
tooltip : {
axisPointer : {
type : 'shadow'
}
},
title: {
text:'xxx激活设备数',
left:'left' ,
top:'10px',
textStyle: {
color: '#666',
fontWeight: 'normal'
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
grid: {
y: '10%',
y2: '10%'
},
legend: {
data:['安卓','诺基亚','苹果']
},
xAxis:{
type: 'category',
axisLabel:{
interval: 0, // {number}
rotate: 40
},
data: ['星期三','星期四']
},
yAxis:{
type: 'value',
min: 0,
interval: 10000
},
series: [
{
name:'安卓',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#548dd5'
}
},
data: [["星期三",10000],["星期四",20000]]
},
{
name:'诺基亚',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#000'
}
},
data: [["星期三",11000],["星期四",21000]]
},
{
name:'苹果',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#e56c0a'
}
},
data: [["星期三",12000],["星期四",18000]]
},
{
name:'合计',
type:'bar',
stack:'xxx',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#000'
},
formatter:''
}
},
data: [["星期三",0],["星期四",0]] //思路一:给series集合末尾多加一栏用于展示合计,但是值都是0;缺点:必须根据xAxis的data生成一组为空的数据,且tooltip不能加trigger: 'axis',这个条件,不然会展示合计:0
}
]
};
var series = option["series"];
var fun = function (params) {
var data3 =0;
for(var i=0,l=series.length;i<l;i++){
data3 += series[i].data[params.dataIndex][1]
}
return data3
}
//加载页面时候替换最后一个series的formatter
series[series.length-1]["label"]["normal"]["formatter"] = fun
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//legend点击事件,根据传过来的obj.selected得到状态是true的legend对应的series的下标,再去计算总和
myChart.on("legendselectchanged", function(obj) {
var b = obj.selected
, d = [];
//alert(JSON.stringify(b))
for(var key in b){
if(b[key]){
//alert(key)
for(var i=0,l=series.length;i<l;i++){
var changename = series[i]["name"];
if(changename == key){
d.push(i);//得到状态是true的legend对应的series的下标
}
}
}
}
var fun1 = function (params) {
var data3 =0;
for(var i=0,l=d.length;i<l;i++){
for(var j=0,h=series.length;j<h;j++){
if(d[i] == j){
data3 += series[j].data[params.dataIndex][1] //重新计算总和
}
}
}
return data3
}
series[series.length-1]["label"]["normal"]["formatter"] = fun1
myChart.setOption(option);
})
</script>
</body>
</html>
最终效果图如下: