【ExtjsV6.0初级】Extjs引入Echarts方法(Extjs整合Echarts)

原创 2016年08月31日 15:58:28

背景: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:机哥的Extjs学习之路开始啦!欢迎同样是做Extjs开发的加我QQ 493967121学习交流微笑

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Extjs4 封装echarts组件 2016.8.31

Extjs4自带的图形报表不够强大,所以有了封装echarts的想法。 举个栗子: http://blog.csdn.net/zdb330906531/article/category/11050...

Echarts 与 Extjs4 集成

首先html中引用js 自定义组件 Ext.define("Ext.ux.EChartsComponent", { extend: "Ext.Co...
  • dahuzix
  • dahuzix
  • 2014年11月27日 12:37
  • 3538

如何让echarts在extjs5中自适应大小

在extjs5中使用echarts的时候如何才能让图表随浏览器的改变?网上有很多方法,官网使用的是window.onresize = myChart.resize;我也是用的这个成功了的,把之前说的a...
  • Wfj521
  • Wfj521
  • 2015年11月24日 16:06
  • 1277

Extjs3.3. 中用 Echarts

Extjs3.3. 中用 Echarts。 将Echarts写成一个组件方便以后的调用。
  • wzs298
  • wzs298
  • 2015年06月10日 17:03
  • 5979

extjs 插入echarts柱状图(附带一个饼图)

extjs 插入echarts柱状图(附带一个饼图)

在EXT中使用统计图

先看一下效果图。 一 前言:     在项目实施中,设计统计部分经常会使用图表进行显示,在Extjs3中内置了图表控件,但实际表现无法达到3D的美观效果,通过查找FusionChart可以实现比较美观...

echarts+extjs3.x结合

由于项目中使用个的是extjs3系列,它自带的图标据我的了解没办法画平滑的曲线图,只能画折线图,在extjs4中增加了一个属性smooth可以进行曲线和折线的控制,但是项目中有很多老的部分已经使用了e...
  • cylbdda
  • cylbdda
  • 2015年05月26日 10:47
  • 758

extjs5中使用echart让图表更丰富

这次在extjs项目中使用到echart图表,我使用的是extjs的可视化gong
  • Wfj521
  • Wfj521
  • 2015年11月19日 21:57
  • 2078

集成 extjs 和 highcharts

highcharts 库的画图效果比 ExtJS 好,但 ExtJS 拥有强大的类管理。两者都很不错。 通常在商业项目上,尽量只选择一个库,以减少成本。但如果只是用于非盈利项目上,那么,可以把两者结...

extjs echarts highcharts 饼图

echarts,highcharts,extjs 饼图
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【ExtjsV6.0初级】Extjs引入Echarts方法(Extjs整合Echarts)
举报原因:
原因补充:

(最多只允许输入30个字)