一、效果图
1、这是用Obiee + echarts做出来的堆叠图，效果如图：
2、数据（数据库随机生成的数，仅供参考），如图：
PS：
1、由于echarts不能识别带“%”的数字，所以就设为带两位小数的数字，然后再在代码里面加“%”进去就可以了，显示效果是一样的。
2、由于这里要达到百分百堆叠的效果，所以要先将需要的数据计算好，每一行的和都是100（%）。
二、代码解析
前缀：
<!-- 引入 ECharts 文件 -->
<scriptsrc="/analyticsRes/echarts/dist/echarts.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<divid="dom211"style="width:680px;height:300px;"></div>
<scripttype="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart =echarts.init(document.getElementById('dom211'));
var data1=[];
var data2=[];
var data3=[];
var data4=[];
var data5=[];
</script>
叙述：
<script>
data1.push('@1');
data2.push({value:'@2'});
data3.push({value:'@3'});
data4.push({value:'@4'});
data5.push({value:'@5'});
</script>
后缀：
<script>
var option = {
title:{
text: '占比趋势分析',
left: 'left'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type :'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:"{b0}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}:{c2}%<br />{a3}: {c3}%"
},
legend: {
data: ['冰箱', '家用空调','波轮洗衣机','滚筒洗衣机'],
orient:'vertical',
right:'right',
bottom:'center',
},
grid: {
left: '3%',
right: '15%',
bottom: '3%',
containLabel: true
},
xAxis:{
type: 'category',
data: data1
},
yAxis: {
type: 'value',
axisLabel:{
formatter:'{value}%' //在这加%
}
},
series: [
{
name: '冰箱',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideTop',
formatter:'{c}%'
}
},
data: data2,
itemStyle:{
normal:{
color:'#5BBD2B'
}
}
},
{
name: '家用空调',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideTop',
formatter:'{c}%'
}
},
data: data3,
itemStyle:{
normal:{
color:'#336699'
}
}
},
{
name: '波轮洗衣机',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideTop',
formatter:'{c}%'
}
},
data: data4,
itemStyle:{
normal:{
color:'#99CCCC'
}
}
},
{
name: '滚筒洗衣机',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideTop',
formatter:'{c}%'
}
},
data: data5,
itemStyle:{
normal:{
color:'#168C83'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>