Obiee+echarts实例之饼图(1)

浏览: 1693

一、效果图

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

推荐 0
本文由 sudan 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册