Extjs中使用Echarts(自适应)

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

<script type="text/javascript" src="js/echarts-min.js"></script>  

“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                    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} <br/> {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);            })        })

这是仪表盘的自适应的图