<!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> -->
<!-- 引入 ECharts 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
<!-- 如果需要使用主题，同时引入主题文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/theme/echarts.min.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:0}, {value:701}, {value:734}, {value:1090}, {value:1130}, {value:1120}];
var data1= [{value:0}, {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:0}, {value:0}, {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){
console.log(arr);
var min;
for(var j = arr.length-1;j<arr.length;j--){
if(arr[j]!=0){
min = j;
break;
}
}
return min;
}
</script>
</html>
