extjs-擴展:百度echarts引入

kid143 發(fā)布于2019-08-22 13:58 / 2968人閱讀

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

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

先上個圖，看一下效果

圖片描述

思路

echarts正常情況下是以一個div作為渲染容器的，而且這個div必須指定高度初始化。在extjs里，適合干這件事的組件，就是panel面板了。可以在面板boxready事件中將echarts渲染到對應dom節(jié)點。

封裝一個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: "請正確配置圖表參數(shù):height"
            })
        }
        if (!me.option) {
            showFailMesg({
                msg: "請正確配置圖表參數(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();
        //同時綁定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官網(wǎng)例子，具體參考百度官方的說明，
                    title: {
                        x: "right",
                        text: "用戶來源類型",
                        subtext: "純屬虛構"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} 
: {c} (6a22guqa%)"
                    },
                    legend: {
                        orient: "vertical",
                        x: "left",
                        data: ["直接訪問", "郵件營銷", "聯(lián)盟廣告", "視頻廣告", "搜索引擎"]
                    },
                    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: "聯(lián)盟廣告"},
                                {value: 135, name: "視頻廣告"},
                                {value: 1548, name: "搜索引擎"}
                            ]
                        }
                    ]
                }

            }```

最后，記得在app.html里面引入echarts的js文件，如下:

 
以下無正文

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/92692.html

vue+echarts根據(jù)ip地址制作簡單的地圖定位

摘要：閑話不多說，介紹工具開發(fā)工具平臺框架百度地圖。給出源代碼，不做研究百度地圖瀏覽器定位您的位置根據(jù)和百度地圖相關，大家還可以在此基礎上擴展很多功能，有相關問題或意見可以評論討論哦。下面是官方文檔飛機路線點我點我百度地圖點我點我前天突發(fā)奇想做一個地圖定位的前端界面，于是就研究了一下百度定位功能。新手，歷時兩天終于完成了本次的設計。雖然看上去簡單，但是用到的東西不少。我在網(wǎng)上找資源的時候還...

UsherChen 2019-08-22 17:33 評論0 收藏0
百度地圖 osm地圖 leaflet echarts webapck的組合使用時的踩坑記錄

摘要：百度地圖創(chuàng)建標簽進行加載使用百度地圖需要百度地圖添加擴展，用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標的加載問題，詳見另外也可以考慮使用動態(tài)創(chuàng)建標簽的方法，類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖創(chuàng)建 script標簽進行加載 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 評論0 收藏0
百度地圖2.0離線版與echarts結合

摘要：根據(jù)需要對頁面的地圖進行拖拽和縮放，在調(diào)用頁面，拿到。最終的目錄結構與結合引入兩種方法，一種是引入安裝包里的文件本文采用這用，另一種是從中直接拿設置中心點設置縮放范圍地圖層級，這次只需要到級就好，最小能看中國地圖級就好。由于客戶需求，之前使用的json形式的可鉆取型地圖被放棄了，要好看，沒有網(wǎng)～，于是開啟了打地鼠（bug）模式，總結如下：網(wǎng)上搜索，百度離線地圖資料很有限啊，可以用的...

Crazy_Coder 2019-08-26 12:12 評論0 收藏0
angular4中引入echarts

摘要：安裝在項目中引入文件使用在你真正需要使用指令的中堆疊區(qū)域圖郵件營銷聯(lián)盟廣告視頻廣告直接訪問搜索引擎周一周二周三周四周五周六周日郵件營銷總量聯(lián)盟廣告總量視頻廣告總量直接訪問總量搜索引擎總量直達營銷廣告搜索引擎郵件營銷聯(lián) 1.安裝ngx-echarts //if you use npmnpm install echarts --save //if your angular version ...

ormsf 2019-08-26 13:29 評論0 收藏0
react項目引入echarts中國地圖

摘要：最近做的項目需要如下的中國地圖最先想到的當然是下面是引入的具體步驟首先要準備兩個文件一個是文件，一個是地圖文件官方有鏈接，我這邊是使用的版本官方已不再提供支持但我還是找了一個線上版本，當然我網(wǎng)盤里也有鏈接密碼，可供大家自行下載把這兩個文件插最近做的react項目需要如下的中國地圖showImg(https://segmentfault.com/img/remote/146000001...

taoszu 2019-08-22 18:45 評論0 收藏0