Obiee+echarts实例之100%竖堆叠图

一、效果图

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>