extjs-擴展:百度echarts引入

本節介紹如何將百度的echarts引入extjs項目，echarts官網

先上個圖，看一下效果

圖片描述

思路

echarts正常狀況下是以一個div做爲渲染容器的，並且這個div必須指定高度初始化。在extjs裏，適合幹這件事的組件，就是panel面板了。能夠在面板boxready事件中將echarts渲染到對應dom節點。

封裝一個echart擴展:app/luter/ux/EchartsPanel.js

Ext.define('luter.ux.EchartsPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.echartspanel',
    liquidLayout: true,
    cls: 'chart-body',
    initComponent: function () {
        var me = this;
        if (!me.height) {
            showFailMesg({
                msg: '請正確配置圖表參數:height'
            })
        }
        if (!me.option) {
            showFailMesg({
                msg: '請正確配置圖表參數:option'
            })
        }
        me.on("boxready", function () {//boxready後，獲取到panel的dom元素，把echarts渲染上去。
            me.echarts = echarts.init(me.getEl().dom);
            if (me.option) {
                me.echarts.setOption(me.option);
            }
        });
        me.callParent();
        //同時綁定panel的resize事件，對charts圖進行大小適配
        me.on("resize", function (ta, width, height, ow, oh, e) {
            me.echarts.resize(ow - 10, oh - 5);
        });
    }
});

例子:

{
                xtype: 'echartspanel', 
                height: 300,//初始化高度
                option: {//charts的配置，來自百度echarts官網例子，具體參考百度官方的說明，
                    title: {
                        x: 'right',
                        text: '用戶來源類型',
                        subtext: '純屬虛構'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 335, name: '直接訪問'},
                                {value: 310, name: '郵件營銷'},
                                {value: 234, name: '聯盟廣告'},
                                {value: 135, name: '視頻廣告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }
                    ]
                }

            }```

最後，記得在app.html裏面引入echarts的js文件，以下:

<script src="https://cdn.bootcss.com/echar...;></script>

如下無正文