路径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说明文档
- 色斑图加透明