堆疊柱狀圖頂端圓並且統計總數
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>堆疊柱狀圖(頂端圓角）</title>
<script src="echarts.js"></script>
</head>
<body>
<!--爲ECharts 準備一個具備大小的DOM-->
<div id="main1" style="width:600px; height:600px"></div>
</body>
<script>
//基於準備好的Demo,實例化ECharts
var myECharts = echarts.init(document.getElementById('main1'));
var data0 = [{value:620}, {value:732}, {value:701}, {value:734}, {value:1090}, {value:1130}, {value:1120}];
var data1= [{value:120}, {value:132}, {value:101}, {value:134}, {value:290}, {value:230}, {value:220}];
var data2= [{value:60}, {value:72}, {value:71}, {value:74}, {value:190}, {value:130}, {value:110}];
var data3 = [{value:62}, {value:82}, {value:91}, {value:84}, {value:109}, {value:110}, {value:120}];
for(var i = 0;i<data1.length;i++){
var arr = [];
arr.push(data0[i].value);
arr.push(data1[i].value);
arr.push(data2[i].value);
arr.push(data3[i].value);
(eval("data"+getMinIndex(arr)))[i].itemStyle = {
normal:{
barBorderRadius :[10,10,0,0]
}
}
}
//指定圖標的配置項和數據
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data:['百度','谷歌','必應','其他']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'百度',
type:'bar',
barWidth : 18,
stack: '搜索引擎',
data:data0,
itemStyle:{
normal:{
color:'#505D6F'
}
}
},
{
name:'谷歌',
type:'bar',
stack: '搜索引擎',
data:data1,
itemStyle:{
normal:{
color:'#826AF9'
}
}
},
{
name:'必應',
type:'bar',
stack: '搜索引擎',
data:data2,
itemStyle:{
normal:{
color:'#FFCC00'
}
}
},
{
name:'其他',
type:'bar',
stack: '搜索引擎',
data:data3,
itemStyle:{
normal:{
color:'#99CEFF'
}
},
label:{
normal:{
show:true,
position:'top',
formatter:function(param){
console.log(param.value);
return param.value+data1[param.dataIndex].value+data2[param.dataIndex].value+data3[param.dataIndex].value
}
}
}
}
]
};
//使用剛指定的配置項和數據
myECharts.setOption(option);
//獲取最頂端柱子
function getMinIndex(arr){
var min;
for(var j = arr.length-1;j<arr.length;j--){
if(arr[j]!=0){
min = j;
break;
}
}
return min;
}
</script>
</html>
