【ExtjsV6.0初级】Extjs引入Echarts方法（Extjs整合Echarts）

 

背景：Extjs的框架很强大，Echarts的图标功能很强大，开发时候想在Extjs中引入Echarts，使用它的图表功能。

说明：Extjs版本为ext-6.0.1，使用的是GPL开源版本；Echarts是3.2.3版本，例子就拿Echarts官网的柱状图演示效果（图1.1），代码和图像都在官网

开干：

1.  index.html文件中引入Echarts

 

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

  “js/echarts-min.js”替换成自己的echart文件路径

 

 

2.  新建一个Panel（其他控件都OK），名字叫做EchartsPanel，名字可以根据自己项目需要取，代码如下：

 

//创建一个名字叫做EchartsPanel的Panel，继承Ext原生Panel

Ext.define('Test.view.main.EchartsPanel', {
    extend: 'Ext.Container',
    xtype:'</span><span style="color:#ff0000;">echartspanel</span><span style="color:#333333;">', //xtype定义好
    height: 380,  

    bodyPadding: 15,
    border: false,

    style:{
        width: '95%',
        marginBottom: '10px'
    },

//config中配置option，option代码来源于echarts官网
    config: {

        option: {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
    },

    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();
    }
});

3. 在需要的地方引入创建的ExtjsPanel,例如，我这里是有一个Container，我在Container中放入ExtjsPanel，代码如下：

 

 

Ext.define('Test.view.main.Home', {
    extend: 'Ext.Container',
    xtype: 'home',
    items: [
        {
            xtype:'</span><span style="color:#ff0000;">echartspanel</span><span style="color:#333333;">'
        }
    ]
});</span>

效果如下图：

大功告成！

 

 

附：另外一种引入Echarts图表的方式：直接通过html+option方式（有影响Extjs布局的风险），Sample如下：

1.我现在有一个Panel，我需要在Panel局部或整个页面放置Echarts控件，代码如下：

 

Ext.define('Test.view.main.Home', {
    extend: 'Ext.Container',
    xtype: 'home',
    items: [
        {
            html:'<div id="first01chart" style="width: 600px;height:400px"></div>',

            afterRender: function(){
                console.log("[afterrender] start:");
                var overTimeChart = echarts.init(document
                    .getElementById("first01chart"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                overTimeChart.setOption(option);
                console.log("[afterrender] end");

            }
        }
    ]
});

2.这种方式更接近Echarts官方的方式，但是引入了新的div，经测试，如果用到Panel 的 split等属性会对Extjs布局有影响，应该是css选择器的造成的。
 

 

Mark:机哥的JAVA学习之路开始啦！欢迎同样是做JAVA开发的关注公众号：java流水账 学习交流转存失败重新上传取消

 

这里没有敷衍的复制粘贴，博眼球的面试资料分享，有的只是尽可能清晰的讲清个人开发中遇到的一个个问题和总结。欢迎大家关注Java流水账，纯粹的个人技术公众号。