Obiee+echarts实例之饼图(1)

一、效果图

1、这是用Obiee + echarts做出来的饼图，效果如图：

2、数据（仅供参考），如图：

 

二、代码解析

//前缀

<!-- 引入echarts文件（注意路径） -->

<scriptsrc="/analyticsRes/echarts/dist/echarts.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<divid="dom" style="width: 500px;height: 280px;"></div>

<scripttype="text/javascript">

// 初始化echarts实例

var myChart =echarts.init(document.getElementById('dom'));

var data1=[];

var data2=[];

var data3=[];

</script>

 

 

//叙述

<script>

data1.push('@1');

data2.push({value:'@2',name:'@1'});

</script>

 

 

 

//后缀

<script>

var option = {

title: {

show:true,

text: 'Obiee+echarts实例之饼图(1)',

x:'left'

},tooltip : {

trigger:'item',

formatter: "{a} <br/>{b} : {c}({d}%)" //有特殊含义，分别指{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）

},

//图例：点击时可以关闭该项

legend: {

orient:'vertical', //图例竖排

right:'right',

bottom:'center',

data: data1

},

color:['#6699CC','#99CCCC','#CC3333','#7EB679','#FF9900','#993366'] , //每一个扇形的颜色

series: [{

name: '排产数量',

type: 'pie',

radius:'70%', //饼图半径

center:['35%','50%'], //饼图位置

label: { //饼图标签设置（位置、字体大小、颜色）

normal:{

position:'inside',

textStyle:{

fontSize:8,

color:'#000'

}

}

},

data: data2

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

 

 

三、小提示

1、代码里面我认为比较特殊的地方都会写上注释，但若以前的文章写过就不再赘述了。我还没搞清楚的地方（红色代码）也注释了，希望各位走过路过的大神指点一二，拜谢。

2、前缀那里要注意脚本冲突问题。id必须是唯一的，不然把多个分析放在同一个仪表盘页的时候会出现覆盖的情况，只显示了最后一个图形。

2、数据格式只能是数字，且不能有千分位符。要是确定代码正确还没出效果的话，可以看看是不是千分位符在作怪。

3、tooltip那里的百分比，需在formatter里面改动，事先将数值*100，再将其格式化，即： ({d}%)。详见：http://echarts.baidu.com/option.html#tooltip.formatter。