摘要:本節介紹如何將百度的引入項目,官網先上個圖,看一下效果圖片描述思路正常情況下是以一個作為渲染容器的,而且這個必須指定高度初始化。
本節介紹如何將百度的echarts引入extjs項目,echarts官網先上個圖,看一下效果
圖片描述
思路echarts正常情況下是以一個div作為渲染容器的,而且這個div必須指定高度初始化。在extjs里,適合干這件事的組件,就是panel面板了。可以在面板boxready事件中將echarts渲染到對應dom節點。
封裝一個echart擴展:app/luter/ux/EchartsPanel.jsExt.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}最后,記得在app.html里面引入echarts的js文件,如下:
{b}: {c} (2eiasgs%)" }, 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: "搜索引擎"} ] } ] } }```