一、效果图
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。