echarts堆疊柱狀圖計算總數
<!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>
網上搜的例子。javascript
下圖css
