Obiee+echarts实例之饼图(2)

浏览: 1900

一、效果图

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


2、数据(仅供参考),如图:


二、代码解析

//前缀

  <!-- 引入 ECharts 文件 -->

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

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

<divid="dom22" style="width: 320px;height:220px;"></div>

<scripttype="text/javascript">

//初始化

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

var data1=[];

var data2=[];

</script>

 

 

 

//叙述

<script>

data1.push('@1');

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

</script>

 

 

 

 

//后缀

<script>

var option = {

    title: {

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

        left: 'left'

    },

 visualMap:{  //视觉映射组件

        show: false,

        min: 100,   //数据范围

        max: 1400,

        Range: {

            colorLightness: [0, 1]  //颜色明暗度,搞不懂其运行原理(?)

        }

    },

 

    tooltip : {

        trigger: 'item',

        formatter: "{a}<br/>{b} : {c} ({d}%)"  //有特殊含义,上一篇饼图(1)讲过

    },

 

    series : [

        {

            name:'排产数量',

            type:'pie',

            radius : '55%',

            center: ['50%', '50%'],

            data:data2,

            roseType: 'angle',

            label: {

                normal: {

                    textStyle: {

                        color: '#000'

                    }

                }

            },

            labelLine: {  //饼图标签的那条线

                normal: {

                    lineStyle: {

                        color: '#333'

                    },

                    smooth: 0.2,

                    length: 10,

                    length2: 20

                }

            },

            itemStyle: {

                normal: {

                    color:'#BF444C',  //饼图颜色,但使用visualMap后不起作用(?)

                    shadowBlur: 100,

                    shadowColor: 'rgba(0, 0, 0,0.5)'

                }

            }

        }

    ]

};

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

    myChart.setOption(option);

</script>

三、小提示

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

2、echarts识别不了biee里面自带的合计,要加的话只能自己另外弄。

3、取色可以使用相应的吸色软件,pickpick功能强大但稍显累赘,现在使用的是ColorMania,小小的一个,方便快捷。

四、不懂之处

* Series.itemStyle.normal.color可以设置饼图的颜色,但使用visualMap之后就不起作用了。即使我设置为blue,出来的饼图还是红色的。

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

0 个评论

要回复文章请先登录注册