EXTJS4自学手册——环形图

一、创建数据容器：

var dountCharStore = Ext.create('Ext.data.JsonStore', {
    fields: ['地区', '人口'],
    data: [
        { '地区': '重庆', '人口': 1000 },
        { '地区': '上海', '人口': 2000 },
        { '地区': '成都', '人口': 1200 },
        { '地区': '云南', '人口': 800 }
    ]
});

二、创建环形图：

注意其和饼状图的区别，在于新加了一个donut属性

Ext.define("ExtStudy.DonutChar", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: dountCharStore,
        legend: {
            position: 'right'
        },
        series: [{
            type: 'pie',//采用线形图
            highlight: true,
            showInLegend: true,//是否显示legend
            tips: {//鼠标指向节点时的提示信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('地区') + ': 人口' + storeItem.
                    get('人口') + '万');
                }
            },
            label:{//按照那个字段来划分
                field: '地区',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            },
            field: '人口',//按照那个字段划分
            donut:30//内径大小
        }]
    }
})

效果图