extjs6制作一个条形统计图切换折线统计图的阿里

在ExtJS6中，可以通过使用chart组件来制作一个条形统计图和折线统计图的切换效果。以下是一个简单的示例：

1. 创建一个panel组件，用于容纳图表组件。

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: [{
        xtype: 'chart',
        reference: 'myChart',
        store: {
            fields: ['name', 'data1', 'data2', 'data3'],
            data: [{
                name: 'Metric 1',
                data1: 10,
                data2: 12,
                data3: 14
            }, {
                name: 'Metric 2',
                data1: 7,
                data2: 8,
                data3: 16
            }]
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            fields: ['data1', 'data2', 'data3'],
            grid: true,
            minimum: 0
        }, {
            type: 'category',
            position: 'bottom',
            fields: ['name'],
            visibleRange: [0, 0.5]
        }],
        series: [{
            type: 'bar',
            xField: 'name',
            yField: ['data1', 'data2', 'data3'],
            stacked: true
        }]
    }]
});

2. 创建一个切换按钮，用于切换图表类型。

{
    xtype: 'button',
    text: 'Toggle Chart Type',
    handler: function(btn) {
        var chart = btn.up('panel').down('chart'),
            series = chart.getSeries()[0];

        if (series.getType() === 'bar') {
            series.setType('line');
            btn.setText('Toggle to Bar Chart');
        } else {
            series.setType('bar');
            btn.setText('Toggle to Line Chart');
        }
    }
}

3. 点击按钮时，切换图表类型。

handler: function(btn) {
    var chart = btn.up('panel').down('chart'),
        series = chart.getSeries()[0];

    if (series.getType() === 'bar') {
        series.setType('line');
        btn.setText('Toggle to Bar Chart');
    } else {
        series.setType('bar');
        btn.setText('Toggle to Line Chart');
    }
}

这样，就可以在ExtJS6中制作一个条形统计图和折线统计图的切换效果了。