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