【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流水账 学习交流smile.gifuploading.4e448015.gif转存失败重新上传取消微笑

 

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

评论 2 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

安琪拉的博客

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值