摘要：本節(jié)介紹如何將百度的引入項(xiàng)目，官網(wǎng)先上個(gè)圖，看一下效果圖片描述思路正常情況下是以一個(gè)作為渲染容器的，而且這個(gè)必須指定高度初始化。

本節(jié)介紹如何將百度的echarts引入extjs項(xiàng)目，echarts官網(wǎng)

圖片描述

echarts正常情況下是以一個(gè)div作為渲染容器的，而且這個(gè)div必須指定高度初始化。在extjs里，適合干這件事的組件，就是panel面板了?？梢栽诿姘錬oxready事件中將echarts渲染到對(duì)應(yīng)dom節(jié)點(diǎn)。

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: "請(qǐng)正確配置圖表參數(shù):height"
            })
        }
        if (!me.option) {
            showFailMesg({
                msg: "請(qǐng)正確配置圖表參數(shù):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();
        //同時(shí)綁定panel的resize事件，對(duì)charts圖進(jìn)行大小適配
        me.on("resize", function (ta, width, height, ow, oh, e) {
            me.echarts.resize(ow - 10, oh - 5);
        });
    }
});

 

{
                xtype: "echartspanel", 
                height: 300,//初始化高度
                option: {//charts的配置，來(lái)自百度echarts官網(wǎng)例子，具體參考百度官方的說(shuō)明，
                    title: {
                        x: "right",
                        text: "用戶來(lái)源類型",
                        subtext: "純屬虛構(gòu)"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} 
: {c} (dnkpnhlp%)"
                    },
                    legend: {
                        orient: "vertical",
                        x: "left",
                        data: ["直接訪問(wèn)", "郵件營(yíng)銷", "聯(lián)盟廣告", "視頻廣告", "搜索引擎"]
                    },
                    series: [
                        {
                            name: "訪問(wèn)來(lái)源",
                            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: "直接訪問(wèn)"},
                                {value: 310, name: "郵件營(yíng)銷"},
                                {value: 234, name: "聯(lián)盟廣告"},
                                {value: 135, name: "視頻廣告"},
                                {value: 1548, name: "搜索引擎"}
                            ]
                        }
                    ]
                }

            }```