Echarts 与 Extjs4 集成

首先html中引用js

<script src="extjs4/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all-gray.css"/>
<script src="extjs4/ext-all.js" type="text/javascript"></script>
<script src="extjs4/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" src="js/echarts/echarts-plain-map.js"></script>

自定义组件

<!-- EChartsComponent: js -->
Ext.define("Ext.ux.EChartsComponent", {
    extend: "Ext.Component",
    alias: "widget.echartscmp",
    border: false,
    config: {
        option: null
    },
    initComponent: function () {
        var me = this;
        if (!me.height) {
            throw new Error("图表组件需显式设置高度!");
        }
 
        me.on("boxready", function () {
            me.echarts = echarts.init(me.getEl().dom);
            if (me.option) {
                me.echarts.setOption(me.option);
            }
        });
 
        me.callParent();
    }
});