EXTJS4自学手册——雷达图

一、创建数据容器：

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

二、创建雷达图：

Ext.define("ExtStudy.RadarChar", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: radarCharStore,
        legend: {
            position: 'right'
        },
        axes: [{//显示雷达图坐标
            type: 'Radial',
            position: 'radial',
            label: {
                display: true
            }
        }],
        series: [{
            type: 'radar',//采用线形图
            xField: '地区',
            yField: '人口',
            showInLegend: true,
            showMarkers: true,
            highlight: true,
            markerConfig: {
                radius: 4
            },
            style: {
                'stroke-width': 2,
                fill: 'none'
            }
        }]
    }
})

效果图：