路徑D:\ireport365\ireport365.war\WEB-INF\pages\enduser\designer\index.jsp
在這個文件添加2個文件 放到jquery.json.min.js下面吧
_scripts.push({url: "http://www.2xyw.com/cdn/three/three.min.js"});
_scripts.push({url: "http://www.2xyw.com/cdn/gio/gio.min.js"});
路徑D:\ireport365\ireport365.war\js\enduser\designer\vs-component-basic.js
第一步添加組件對象
```
{
name: "",
type: "gioChart",
coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_timeLine.png",
coverImageWidth: "50%",
tip: "地球儀"
}
```
第二步默認大小
```
case "gioChart":
a.sizeX = 4;
a.sizeY = 24;
break;
```
核心代碼
```
vsPluginComponentModule.factory("$vcPlugin_basic_gioChart", ["$vsPluginRegister", "$timeout",
function (a, c) {
var b = {
showDataCategory: true,
showBorderCategory: true,
showBasicCategory: true,
showFixedCategory: true,
showEventCategory: false,
showTitleCategory: true,
init: function (scope, element, component, $compile) {
scope.element = element;
scope.component = component;
//開啟頁面過濾
component.config.pageFilter = false;
component.config.dimBarOrient = false;
if (!component.config.is) {
// 將初始國家改成"中國"
component.config.setInitCountry = "CN";
//地球表面上 提及國家 比 未提及的國家 更高
component.config.lightenMentioned = true;
// 未提到過的國家在3D地球上不可選 false為不開啟
component.config.disableUnmentioned = false;
// 顯示輸入線
component.config.showInOnly = true;
// 顯示輸出線
component.config.showOutOnly = true;
//3D地球周圍顯示光暈的顏色
component.config.setHaloColor = "#ff8800";
// 初始化風格
component.config.setStyle = "magic";
// 地球表面顏色
component.config.setSurfaceColor = "#fff";
// 在選中狀態下的國家顏色
component.config.setSelectedColor = "#fff";
// 設置輸出連接線顏色
component.config.setExportColor = "#ff8800";
// 設置輸入連接線顏色
component.config.setImportColor = "#ff8800";
// 設置背景顏色
component.config.setBackgroundColor = "#000";
//海洋高度
component.config.adjustOceanBrightness = 0.5;
//設置國家高度
component.config.adjustRelatedBrightness = 0.5;
// 提到的國家高度
component.config.adjustMentionedBrightness = 0.5;
}
},
buildDataDescription: function (e, h, g, d, f) {
h.$on(event_refreshBindingData,
function (k, l) {
d.context.orgData = d.context.data;
var i = d.config.datasourceConfig.dimensions;
var j = d.config.datasourceConfig.measures;
if (i && i.length > 0) {
if (!j) {
j = []
}
h.queryModelData({
eventParam: l,
dimensions: i,
measures: j,
tableKey: d.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (m) {
if (m.data.success) {
if (d.context.data == null || d.context.data.length == 0) {
return
}
if (d.context.data != null && d.context.data.length > 0) {
// console.log(d.context.data)
b.refreshChartView(h, g, d, f)
}
} else {
toaster.error({
body: m.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
})
},
buildChartDescription: function (j, h, e, g) {
var d = {
name: "gioChart",
title: "配置",
groups: []
};
e.description.categories.push(d);
if (j.component.config.showTitle == null) {
j.component.config.showTitle = false
}
j.component = e;
var f = [];
f.push("<div id='gio' style='width:100%;height:100%;'></div>");
var i = g(f.join(""))(j);
h.append(i);
// console.log($("#"+e.id+" #gio")[0]);
// 獲取元素dom
var gio = $("#" + e.id + " #gio")[0];
// 初始化數據
var gioData = [{
e: "CN",
i: "US",
v: 100000
},
{
e: "CN",
i: "RU",
v: 3000000
},
{
e: "RU",
i: "US",
v: 1000000
},
{
e: "FR",
i: "LK",
v: 1000000
},
{
e: "US",
i: "FR",
v: 1000000
},
{
e: "ES",
i: "LB",
v: 235358
},
{
e: "GI",
i: "LT",
v: 353123
},
{
e: "GI",
i: "MV",
v: 352323
},
{
e: "GT",
i: "NE",
v: 3215323
},
{
e: "GT",
i: "NP",
v: 30323
},
{
e: "GT",
i: "PE",
v: 135323
},
{
e: "JO",
i: "MX",
v: 354323
},
{
e: "KI",
i: "MA",
v: 35323
},
{
e: "LK",
i: "IQ",
v: 1762131
},
{
e: "LR",
i: "JE",
v: 172358
},
{
e: "NE",
i: "FI",
v: 180132
},
{
e: "CN",
i: "ES",
v: 110120
},
{
e: "CN",
i: "IT",
v: 195313
},
{
e: "CN",
i: "JM",
v: 2525
},
{
e: "FI",
i: "JO",
v: 533413
},
{
e: "FI",
i: "JP",
v: 534335
},
{
e: "FI",
i: "KI",
v: 353535
},
{
e: "FI",
i: "KW",
v: 53538
},
{
e: "FI",
i: "KY",
v: 323512
},
{
e: "FI",
i: "LK",
v: 135323
},
{
e: "GI",
i: "LR",
v: 213123
},
]
// 核心代碼start
j.component.context.controller = new GIO.Controller(gio);
// var controller = new GIO.Controller( gio );
// console.log(controller)
// console.log(gioData)
var gioInit = function () {
// 數據
// console.log(controller)
j.component.context.controller.clearData();
// console.log(gioData)
j.component.context.controller.addData(gioData);
// 設置初始國家
j.component.context.controller.setInitCountry(e.config.setInitCountry);
// 開啟提到國家的高度
j.component.context.controller.lightenMentioned(e.config.lightenMentioned);
// 禁用沒有提到的國家
j.component.context.controller.disableUnmentioned(e.config.disableUnmentioned);
// 設置光暈顏色
j.component.context.controller.setHaloColor(e.config.lightenMentioned);
// 顯示輸出線
j.component.context.controller.showInOnly(e.config.showOutOnly);
// 顯示輸入線
j.component.context.controller.showOutOnly(e.config.showInOnly);
//設置地球風格
j.component.context.controller.setStyle(e.config.setStyle);
// 設置地球表面顏色
j.component.context.controller.setSurfaceColor(e.config.setSurfaceColor);
// 在選中狀態下的國家顏色
j.component.context.controller.setSelectedColor(e.config.setSelectedColor);
// 設置輸出連接線顏色
j.component.context.controller.setExportColor(e.config.setExportColor);
// 設置輸入連接線顏色
j.component.context.controller.setImportColor(e.config.setImportColor);
// 設置背景顏色
j.component.context.controller.setBackgroundColor(e.config.setBackgroundColor);
//海洋高度
j.component.context.controller.adjustOceanBrightness(e.config.adjustOceanBrightness);
//設置國家高度
j.component.context.controller.adjustRelatedBrightness(e.config.adjustRelatedBrightness);
// 提到的國家高度
j.component.context.controller.adjustMentionedBrightness(e.config.adjustMentionedBrightness);
j.component.context.controller.init();
}
gioInit();
// 核心代碼end
// d.groups.push({
// name: "setStyle",
// title: {
// text: "地球風格"
// },
// elements: [{
// title: "地球風格",
// type: "select-s",
// bind: "fontClass",
// items: [{
// name: "magic",
// value: "magic"
// }, {
// name: "blueInk",
// value: "blueInk"
// }, {
// name: "earlySpring",
// value: "earlySpring"
// }, {
// name: "frozenBerry",
// value: "frozenBerry"
// }, {
// name: "gorgeousDream",
// value: "gorgeousDream"
// }, {
// name: "juicyCake",
// value: "juicyCake"
// }, {
// name: "lemonGate",
// value: "lemonGate"
// }, {
// name: "mint",
// value: "mint"
// }, {
// name: "nearMoon",
// value: "nearMoon"
// }, {
// name: "octoberParty",
// value: "octoberParty"
// }, {
// name: "redBlue",
// value: "redBlue"
// }, {
// name: "strawberry",
// value: "strawberry"
// }, {
// name: "sunset",
// value: "sunset"
// }]
// }]
// });
d.groups.push({
name: "width",
title: {
text: "基本配置"
},
elements: [{
title: "背景顏色",
type: "colorpicker",
bind: "setBackgroundColor"
}, {
title: "國家高度",
type: "switch",
bind: "lightenMentioned",
on: vsLang.on,
off: vsLang.off
}, {
title: "禁用國家",
type: "switch",
bind: "disableUnmentioned",
on: vsLang.on,
off: vsLang.off
}, {
title: "輸入線",
type: "switch",
bind: "showInOnly",
on: vsLang.on,
off: vsLang.off
}, {
title: "輸入線顏色",
type: "colorpicker",
bind: "setImportColor"
}, {
title: "輸出線",
type: "switch",
bind: "showOutOnly",
on: vsLang.on,
off: vsLang.off
}, {
title: "輸出線顏色",
type: "colorpicker",
bind: "setExportColor"
}, {
title: "高度值",
type: "configSlide",
bind: "adjustMentionedBrightness",
config: {
slideStart: 0,
slideEnd: 10
},
}, {
title: "光暈顏色",
type: "colorpicker",
bind: "setHaloColor"
}, {
title: "地球表面",
type: "colorpicker",
bind: "setSurfaceColor"
}, {
title: "選中國家",
type: "colorpicker",
bind: "setSelectedColor"
}, {
title: "海洋高度",
type: "configSlide",
bind: "adjustOceanBrightness",
config: {
slideStart: 0,
slideEnd: 10
},
}, {
title: "國家高度",
type: "configSlide",
bind: "adjustRelatedBrightness",
config: {
slideStart: 0,
slideEnd: 10
},
}]
});
j.$watch("component.config.setBackgroundColor", function (w, u) {
var p = e.config;
p.is = true;
p.setBackgroundColor = w;
j.component.context.controller.setBackgroundColor(w);
});
j.$watch("component.config.adjustMentionedBrightness", function (w, u) {
var p = e.config;
p.is = true;
p.adjustMentionedBrightness = w;
j.component.context.controller.adjustMentionedBrightness(w);
});
j.$watch("component.config.disableUnmentioned", function (w, u) {
var p = e.config;
p.is = true;
p.disableUnmentioned = w;
j.component.context.controller.disableUnmentioned(w);
});
j.$watch("component.config.showInOnly", function (w, u) {
var p = e.config;
p.is = true;
p.showInOnly = w;
j.component.context.controller.showInOnly(w);
});
j.$watch("component.config.setImportColor", function (w, u) {
var p = e.config;
p.is = true;
p.setImportColor = w;
j.component.context.controller.setImportColor(w);
});
j.$watch("component.config.showOutOnly", function (w, u) {
var p = e.config;
p.is = true;
p.showOutOnly = w;
j.component.context.controller.showOutOnly(w);
});
j.$watch("component.config.setExportColor", function (w, u) {
var p = e.config;
p.is = true;
p.setExportColor = w;
j.component.context.controller.setExportColor(w);
});
j.$watch("component.config.setHaloColor", function (w, u) {
var p = e.config;
p.is = true;
p.setHaloColor = w;
j.component.context.controller.setHaloColor(w);
});
j.$watch("component.config.setSurfaceColor", function (w, u) {
var p = e.config;
p.is = true;
p.setSurfaceColor = w;
j.component.context.controller.setSurfaceColor(w);
});
j.$watch("component.config.setSelectedColor", function (w, u) {
var p = e.config;
p.is = true;
p.setSelectedColor = w;
j.component.context.controller.setSelectedColor(w);
});
j.$watch("component.config.adjustOceanBrightness", function (w, u) {
var p = e.config;
p.is = true;
p.adjustOceanBrightness = w;
j.component.context.controller.adjustOceanBrightness(w);
});
j.$watch("component.config.adjustRelatedBrightness", function (w, u) {
var p = e.config;
p.is = true;
p.adjustRelatedBrightness = w;
j.component.context.controller.adjustRelatedBrightness(w);
});
j.$watch("component.config.setStyle", function (w, u) {
var p = e.config;
p.is = true;
p.setStyle = w;
console.log(w)
j.component.context.controller.setStyle(w);
});
},
refreshChartView: function (scope, element, component, $compile) {
var processValueObj = function (b, c) {
if (b == null || b === 0) {
return 0
}
var a = parseFloat(b);
if (isNaN(a)) {
return 0
}
if (c == null) {
c = 0
}
b = Math.round(b * Math.pow(10, c)) / Math.pow(10, c);
return a.toFixed(c)
};
var processValue = function (d, e) {
return processValueObj(d, e)
};
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
// 設置2個維度
component.config.chartDimensionCount = 2
//從context中獲得控件數據
var data = component.context.data;
var serieData = [];
console.log(data)
for (var i = 0; i < data.length; i++) {
var value = processValue(data[i][measures[0].name], component.config.digit);
var dataItem = {
e: data[i][dimensions[0].name].toUpperCase(),
i: data[i][dimensions[1].name].toUpperCase(),
v: parseInt(value)
};
serieData.push(dataItem)
}
if (serieData) {
// var gio = $("#"+component.id+" #gio")[0];
// var controller = new GIO.Controller( gio );
component.context.controller.clearData();
component.context.controller.addData(serieData);
// console.log(component.context.controller)
// gioInit()
// controller.init();
}
// console.log(serieData)
// 處理數據
},
};
a.register("basic", "gioChart", b);
return null
}
]);
```
分享頁
路徑D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html
在這個文件里添加js文件 加到echarts-china 下面吧
```
_scripts.push({url: "http://www.2xyw.com/cdn/three/three.min.js"});
_scripts.push({url: "http://www.2xyw.com/cdn/gio/gio.min.js"});
```
路徑：D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
```
case "gioChart":
var f = [];
f.push("<div class='gio' style='width:100%;height:100%;'></div>");
var i = $compile(f.join(""))(scope);
element.html(i);
// 獲取元素dom
var e = scope.component;
scope.$on(event_refreshBindingData, function (target, param) {
//如果刷新數據事件的發出者是當前控件，不處理本次通知
if(param.component != null && scope.component.id === param.component.id){
return;
}
// console.log(scope.component.config.datasourceConfig)
var dimensions = scope.component.config.datasourceConfig.dimensions;
var measures = scope.component.config.datasourceConfig.measures;
if(measures == null){
measures = [];
}
if (dimensions && dimensions.length > 0) {
scope.queryModelData({
eventParam: param,
dimensions: dimensions,
measures: measures,
tableKey: scope.component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
// console.log(response)
if (response.data.success) {
// console.log(response.data.success)
scope.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
});
// var gio = element.find('#gio')[0];
// var gio = $('#'+component.id+' #gio')[0]
// console.log(gio)
// scope.component.context.controller = new GIO.Controller(gio);
// 初始化數據
var gioData = [{
e: "CN",
i: "US",
v: 100000
},
{
e: "CN",
i: "RU",
v: 3000000
},
{
e: "RU",
i: "US",
v: 1000000
},
{
e: "FR",
i: "LK",
v: 1000000
},
{
e: "US",
i: "FR",
v: 1000000
},
{
e: "ES",
i: "LB",
v: 235358
},
{
e: "GI",
i: "LT",
v: 353123
},
{
e: "GI",
i: "MV",
v: 352323
},
{
e: "GT",
i: "NE",
v: 3215323
},
{
e: "GT",
i: "NP",
v: 30323
},
{
e: "GT",
i: "PE",
v: 135323
},
{
e: "JO",
i: "MX",
v: 354323
},
{
e: "KI",
i: "MA",
v: 35323
},
{
e: "LK",
i: "IQ",
v: 1762131
},
{
e: "LR",
i: "JE",
v: 172358
},
{
e: "NE",
i: "FI",
v: 180132
},
{
e: "CN",
i: "ES",
v: 110120
},
{
e: "CN",
i: "IT",
v: 195313
},
{
e: "CN",
i: "JM",
v: 2525
},
{
e: "FI",
i: "JO",
v: 533413
},
{
e: "FI",
i: "JP",
v: 534335
},
{
e: "FI",
i: "KI",
v: 353535
},
{
e: "FI",
i: "KW",
v: 53538
},
{
e: "FI",
i: "KY",
v: 323512
},
{
e: "FI",
i: "LK",
v: 135323
},
{
e: "GI",
i: "LR",
v: 213123
},
]
// 核心代碼start
scope.refreshChartView = function (scope, element, component, $compile) {
var processValueObj = function (b, c) {
if (b == null || b === 0) {
return 0
}
var a = parseFloat(b);
if (isNaN(a)) {
return 0
}
if (c == null) {
c = 0
}
b = Math.round(b * Math.pow(10, c)) / Math.pow(10, c);
return a.toFixed(c)
};
var processValue = function (d, e) {
return processValueObj(d, e)
};
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
//從context中獲得控件數據
var data = component.context.data;
var serieData = [];
for (var i = 0; i < data.length; i++) {
var value = processValue(data[i][measures[0].name], component.config.digit);
var dataItem = {
e: data[i][dimensions[0].name].toUpperCase(),
i: data[i][dimensions[1].name].toUpperCase(),
v: parseInt(value)
};
serieData.push(dataItem)
}
// if (serieData) {
var gio = $('#'+component.id+' .gio')[0]
console.log(gio)
component.context.controller = new GIO.Controller(gio);
var gioInit = function () {
// 數據
// console.log(controller)
component.context.controller.clearData();
// console.log(gioData)
component.context.controller.addData(gioData);
// 設置初始國家
component.context.controller.setInitCountry(e.config.setInitCountry);
// 開啟提到國家的高度
component.context.controller.lightenMentioned(e.config.lightenMentioned);
// 禁用沒有提到的國家
component.context.controller.disableUnmentioned(e.config.disableUnmentioned);
// 設置光暈顏色
component.context.controller.setHaloColor(e.config.lightenMentioned);
// 顯示輸出線
component.context.controller.showInOnly(e.config.showOutOnly);
// 顯示輸入線
component.context.controller.showOutOnly(e.config.showInOnly);
//設置地球風格
component.context.controller.setStyle(e.config.setStyle);
// 設置地球表面顏色
component.context.controller.setSurfaceColor(e.config.setSurfaceColor);
// 在選中狀態下的國家顏色
component.context.controller.setSelectedColor(e.config.setSelectedColor);
// 設置輸出連接線顏色
component.context.controller.setExportColor(e.config.setExportColor);
// 設置輸入連接線顏色
component.context.controller.setImportColor(e.config.setImportColor);
// 設置背景顏色
component.context.controller.setBackgroundColor(e.config.setBackgroundColor);
//海洋高度
component.context.controller.adjustOceanBrightness(e.config.adjustOceanBrightness);
//設置國家高度
component.context.controller.adjustRelatedBrightness(e.config.adjustRelatedBrightness);
// 提到的國家高度
// console.log(e.config.adjustRelatedBrightness)
component.context.controller.adjustMentionedBrightness(e.config.adjustMentionedBrightness);
}
gioInit();
component.context.controller.clearData();
component.context.controller.addData(serieData);
component.context.controller.init();
// }
};
break;
```
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸（new）
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明