extjs6条形图制作

1. 引入extjs6库文件和主题文件

在html文件中引入以下文件：

<link rel="stylesheet" type="text/css" href="extjs/classic/theme-triton/resources/theme-triton-all.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>

2. 创建条形图

在html文件中创建一个div容器用于显示条形图：

<div id="chartContainer"></div>

在js文件中创建条形图：

Ext.onReady(function () {
    Ext.create('Ext.chart.Chart', {
        renderTo: 'chartContainer',
        width: 500,
        height: 300,
        store: {
            fields: ['name', 'value'],
            data: [
                {name: 'A', value: 10},
                {name: 'B', value: 20},
                {name: 'C', value: 30},
                {name: 'D', value: 40},
                {name: 'E', value: 50}
            ]
        },
        axes: [
            {
                type: 'numeric',
                position: 'left',
                fields: ['value'],
                title: 'Value',
                grid: true,
                minimum: 0
            },
            {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: 'Name'
            }
        ],
        series: [
            {
                type: 'bar',
                xField: 'name',
                yField: 'value',
                style: {
                    fill: '#3F51B5'
                }
            }
        ]
    });
});

3. 配置条形图

可以通过配置项来定制条形图的样式、坐标轴、数据等。以下是一些常用的配置项：

- `width`：条形图宽度。
- `height`：条形图高度。
- `store`：条形图数据。
- `axes`：坐标轴配置项。
- `series`：系列配置项。
- `xField`：x轴字段。
- `yField`：y轴字段。
- `fill`：柱子填充颜色。

4. 运行效果

最终的运行效果如下图所示：