Extjs中使用Echarts(自适应)

首先我们需要在extjs中引用echarts
1.index.html文件中引入Echarts

“js/echarts-min.js”替换成自己的echart文件路径;下载的时候根据的自己的需求下载不同的js.
2. 新建一个Panel（其他控件都OK），名字叫做PanelEcharts，名字可以根据自己项目需要取，代码如下：
3.我这里用的是仪表盘的例子。

/**
 *
 * echarts的公共panel
 */
Ext.define('Ux.layout.PanelEcharts', {
    extend: 'Ext.panel.Panel',
    requires: [],
    alias: [
        'widget.panelecharts'
    ],
    width: this.width,//当用afterrender方法时这里的width、height都是固定的需要自己给定。
    height: this.height,
    option: {},
//    border:false,
    initComponent: function () {
        var me = this;
        me.on({
        //在extjs5中使用echarts的时候如何才能让图表随浏览器的改变？网上有很多方法，官网使用的是resize
            //自适应当前panel的宽和高，图形也会自适应
            resize: function (field,width,height ) {
                this.width=width
                this.height=height
               /*当为tabpanel中添加图的时候，会出现getStyle 为null的问题，所以必须获取最后一个div,然后才可以画图。var overTimeChart = echarts.init(field.getEl().dom.children[0]);*/
                    var overTimeChart = echarts.init(field.getEl().dom);
                    var option = me.option;
                    overTimeChart.setOption(option,true);
            
            },
            /* afterrender: function (field) {
             var overTimeChart = echarts.init(field.getEl().dom);
             var option = me.option;
             overTimeChart.setOption(option);
             }*/


        })
        me.callParent(arguments);
    }
});

在自己用的界面引用上面的panel
requires: [
‘Ux.layout.PanelEcharts’,
],

  var me = this;
        Ext.ajax({
            url: '../../url',
            method: 'post',
            params: {
                orgId: '',
            }
        }, function (json) {
            var _panel = Ext.getCmp('centerpanel'), _width = _panel.getWidth(), _height = _panel.getHeight() - 5;
            _panel.removeAll(true);
            switch (json.length) {
                case 0:
                    return;
                    break;
                case 1:
                    break;
                case 2:
                    _width -= 20;
                    _height = _height / 2;
                    _height = _width / 2;
                    break;
                default:
                    _width -= 20;
                    _height = _height / 2;
                    _width = _width / 4;
                    break;
            }
            var _color = [[50 / 200, '#ff0000'], [1, '#A8A8A8']], _name = '';
            Ext.Array.each(json.content, function (n) {
                if (n.stagnationMinute) {
                    _color = [[(n.value) / 200, '#ff0000'], [1, '#A8A8A8']];
                    _name = '数据停滞' + n.stagnationMinute + '分钟';
                } else {
                    _color = [[(n.value) / 200, '#00b351'], [1, '#A8A8A8']];
                    _name = '';
                }
                var _vboxPanel = {
                    xtype: 'panelecharts',
                    width: _width,
                    height: _height,
                    option: {
                        tooltip: {
                            formatter: "{a} 
 {c}"
                        },

                        series: [{
                            //类型
                            type: 'gauge',
                            name: '关井预警',
                            //半径
                           /* detail: {
                                formatter: function (params) {
                                    console.log(arguments)
                                }
                            },*/
                            radius: 110,
                            center: ['50%', '50%', '50%', '50%'],
                            //仪表盘轴线相关配置。
                            axisLine: {
                                show: true,
                                // 属性lineStyle控制线条样式
                                lineStyle: {
                                    width: 30,
                                    color: _color
                                }
                            },
                            startAngle: 180,
                            //结束角度。
                            endAngle: 0,
                            min: 0,
                            max: 200,
                            data: [{value: (n.value), name: _name}],
                            //仪表盘标题。
                            title: {
                                show: true,
                                offsetCenter: [0, '45%'], // x, y，单位px
                                textStyle: {
                                    color: '#hhh',
                                    fontSize: 20
                                }
                            },
                            //仪表盘详情，用于显示数据。
                            detail: {
                                show: true,
                                offsetCenter: [0, '20%'],
                                formatter: '' + n.wellName + '',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 20
                                }
                            },
                        }]
                    }
                };
                _panel.add(_vboxPanel);
            })

        })

这是仪表盘的自适应的图