Obiee+echarts实例之饼图（2）

一、效果图

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，出来的饼图还是红色的。