ExtJS 饼状图报表

简单的ExtJS饼状图报表。

先上源码，咱再慢慢解析：

Ext.onReady(function(){
                var store = Ext.create('Ext.data.JsonStore', {
                    fields: ['name', 'data'],
                    data: [
                        { 'name': '北京',   'data': 10 },
                        { 'name': '天津',   'data':  5},
                        { 'name': '上海',   'data':  8 },
                        { 'name': '深圳',   'data':  7 },
                        { 'name': '广州',   'data':  6 },
                        { 'name': '济南',   'data':  5 },
                        { 'name': '郑州',   'data':  4 },
                        { 'name': '石家庄',   'data':  3 }
                    ]
                });
                Ext.create("Ext.panel.Panel",{
                    width:600,
                    height:500,
                    title:"饼状图",
                    layout:"fit",
                    renderTo:Ext.getBody(),
                    items:[{
                        xtype:"chart",
                        store:store,
                        animate:true,
                        legend: {
                            position: 'right'
                        },
                        series:[{
                            type:"pie",
                            field:"data",
                            donut:true,
                            showInLegend: true,
                            label:{
                                display:"name",
                                contrast:true,
                            },
                            tips:{
                                trackMouse:true,
                                renderer:function(storeItem,item){
                                    var total = 0;
                                    store.each(function(rec) {
                                        total += rec.get('data');
                                    });
                                    this.setTitle(storeItem.get("data"));
                                }
                            },
                            highlight:{
                                segment:{
                                    margin:20
                                }
                            },
                            listeners:{
                                itemclick:function(o){
                                    var rec=store.getAt(o.index);
                                    alert(rec.get("data"));
                                }
                            }
 
                        }]
                    }]
                });
            })

上述代码便是一个简单的饼状图，数据这里我采用的是本地数据。

示例效果如下图所示：

现在我们来解析一下上面的代码：

里面的store存储数据，这里我就不详细解释了。我这里采用的是本地的数据。

如效果图所示，我采用了一个panel来包含该饼状图。

xtype:"chart" ：创建一个图表

series：是为所有图标系列包含公共逻辑抽象类。属性type:"pie"，用来表示采用的是饼状报表。

field:"data"：当前饼状图块中的数据值。

display:"name"：如上图所示，是用来显示饼状图中的文字的。

tips：这里是用来显示鼠标放在饼状图上的时候，给你的一个提示。用来显示当前图块的信息。

trackMouse:true：此属性设置为true表示提示框跟随你的鼠标而动。

segment：该属性是用来控制，当鼠标放在当前图块中的时候分开的距离。这里margin一般为20 当数值比20 大或者小的时候则会出现一些空白。具体效果可以自己稍微尝试一下。

lengend和showInLegend：这两个必须同时设置，操作右侧的小图例。

itemclick：点击事件。这个事件需要设置在series中，否则无法触发。

以上是我对这个饼状图的一些个人理解。如有什么不足还请各位大神指教。