添加靜態資源 地圖json文件
D:\ireport365\ireport365.war\cdn\1.0\assets-map-json\
路徑 里分別添加 cityMap.js 和main-city包
在D:\ireport365\ireport365.war\WEB-INF\pages\enduser\designer\index.jsp路徑里添加
`<script src="${pageContext.request.contextPath}/cdn/1.0/assets-map-json/cityMap.js"></script>`
在D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html 這里添加
`<script src="${cdnPath}cdn/1.0/assets-map-json/cityMap.js"></script>`
下鉆地圖
D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js
第一步添加 組件type及圖片等
~~~
{
name: "",
type: "DrillDownChinaMap",
coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/zh_chinaAreaMap.png",
coverImageWidth: a,
tip: "地圖下鉆"
}
~~~
二 echarts圖形對象 option
~~~
//存儲切換的每一級地圖信息
// const mapStack = [{mapCode: '100000',mapName: 'china'}];
const mapStack = [];
let curMap = {};
var timeFn = null;
// 下鉆地圖
//初始化地圖
DrillDownChinaMapoptionTemplate = {
animationDuration: 500,
// backgroundColor: "#154e90",
title: {
show: false,
},
tooltip: {
show: true,
trigger: "item",
formatter: function(data){
//console.log(data);
if( !isNaN(data.value) &&data.value!=null ){
return data.name+"："+data.value;
}
}
},
legend: {
show: false,
orient: "vertical",
x: "left",
data: [],
selectedMode: "single",
textStyle: {
color: "#ccc"
}
},
dataRange: {
y: "top",
min: 0,
max: 100,
itemWidth: 12,
itemHeight: 10,
calculable: true,
color: ["#ff3333", "orange", "yellow", "lime", "aqua"],
textStyle: {
color: "#000"
}
},
series: [{
name: '',
type: 'map',
mapType: '',
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontSize: "10",
color: "#999"
}
},
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 處的顏色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
data: []
}]
};
~~~
三 添加類別聯動 聯動不加了 下鉆特殊性 不聯動
~~~
var factory = {
// 是否顯示類別
isShowThresholdCategory: function (scope) {
switch (scope.component.type) {
case "chinaAreaMap":
case "chinamap":
case "chinamap2":
case "chinaHeatMap":
case "DrillDownChinaMap":
return true
}
return false
},
// 獲取類別名稱
getThresholdCategoryName: function (scope) {
switch (scope.component.type) {
case "chinaAreaMap":
case "chinamap":
case "chinamap2":
case "chinaHeatMap":
case "DrillDownChinaMap":
return vsLang.threshold_range
}
return ""
},
// 是否顯示行為
isShowEventCategory: function (scope) {
switch (scope.component.type) {
case "column":
case "mixed":
case "pie":
case "rose":
case "treemap":
case "bar":
case "line":
return true
}
return false
},
// 聯動里面的指標聯動
supportReceiveMeasureLink: function (scope) {
switch (scope.component.type) {
case "column":
case "pie":
case "rose":
case "treemap":
case "bar":
case "line":
case "chinaAreaMap":
case "chinamap2":
case "chinaHeatMap":
return true
}
return false
},
~~~
四 添加提示框 默認顯示
~~~
case "DrillDownChinaMap":
if (component.config.showItemLabel == null) {
component.config.showItemLabel = true
}
option.tooltip.confine = true;
break;
~~~
五 添加刷新數據的方法
~~~
case "DrillDownChinaMap":
internalRefreshChinaDownMapModelData();
break;
~~~
六 在refreshChartView 刷新視圖函數里 添加處理數據的方法
~~~
var internalRefreshChinaDownMapModelData = function () {
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
var chartData = [];
var chartDataMap = {};
var measureIdx = 0;
// console.log(data.length)
for (var i = 0; i < data.length; i++) {
// console.log(data[i])
for(var j = 0; j< data[i].length;j++){
// console.log(data[i][j])
var value = data[i][j][measures[measureIdx].name];
var name = factory._internalFindKvValue(component, data[i][j][dimensions[i].name]);
// console.log(value)
// console.log(name)
chartData.push({
name: name,
value: value
});
}
}
// console.log(component)
// console.log(chartData)
option.series[0].data = chartData;
component.context.chart.setOption(option, true)
};
~~~
七 在buildDataDescription函數里重新寫 接收數據的方法 也就是加了個 switch判斷 DrillDownChinaMap判斷力有拆分數組分別獲取數據 組合成data 傳出去
~~~
scope.$on(event_refreshBindingData, function (target, param) {
switch (component.type) {
case "DrillDownChinaMap":
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var result = [];
// 拆分數組
for(var i=0,len=dimensions.length;i<len;i+=1){
result.push(dimensions.slice(i,i+1));
}
// console.log(result)
// console.log(dimensions)
if (dimensions && dimensions.length > 0 && measures && measures.length > 0) {
// console.log(dimensions)
var dd = [];
for(var i = 0;i<result.length;i++){
// console.log(result[i])
scope.queryModelData({
eventParam: param,
dimensions: result[i],
measures: measures,
tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
if (response.data.success) {
// console.log(response.data.data.data);
dd.push(response.data.data.data)
component.context.data = dd;
// console.log('234534543')
// console.log(component.context.data)
factory.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
// console.log(dd)
// component.context.data = dd;
// factory.refreshChartView(scope, element, component, $compile)
}
// alert('3123123')
break;
case "line":
case "area":
case "column":
case "mixed":
case "bar":
case "pie":
case "rose":
case "treemap":
case "gauge":
case "gauge2":
case "radar":
case "chinamap":
case "chinaAreaMap":
case "chinamap2":
case "chinaHeatMap":
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
// console.log(dimensions)
if (dimensions && dimensions.length > 0 && measures && measures.length > 0) {
console.log(dimensions)
scope.queryModelData({
eventParam: param,
dimensions: dimensions,
measures: measures,
tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
if (response.data.success) {
console.log(response.data);
factory.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
break;
}
});
~~~
八 在添加組件的事件
~~~
case "DrillDownChinaMap":
// 數據處理
var option = component.config.chartConfig;
loadMap1('100000', 'china');
function loadMap1(mapCode, mapName) {
$.ajaxSettings.async = false;
$.getJSON('/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) {
if (data1) {
echarts.registerMap(mapName, data1);
console.log(data1)
option.series[0].mapType = mapName
console.log(mapName)
scope.component.context.chart.setOption(option, true)
curMap = {
mapCode: mapCode,
mapName: mapName
};
} else {
alert('無法加載該地圖');
}
});
}
/**
綁定用戶切換地圖區域事件
cityMap對象存儲著地圖區域名稱和區域的信息(name-code)
當mapCode有值,說明可以切換到下級地圖
同時保存上級地圖的編號和名稱
*/
component.context.chart.on("mapselectchanged", function (params) {
clearTimeout(timeFn);
if (params.dataIndex < 0) {
return
}
// console.log(params)
timeFn = setTimeout(function(){
const name = params.batch[0].name;
const mapCode = cityMap[name];
console.log(mapCode)
console.log(name);
if (!mapCode) { //如果地圖無法繼續下鉆，則讓點擊的區域呈現選中狀態
option.series[0].data = [{
name: name,
selected: true,
// value:Math.round(Math.random()*1000)
}]
return false;
} else {
loadMap1(mapCode, name);
//將上一級地圖信息壓入mapStack
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName
});
}
// scope.component.context.chart.setOption(option, true)
console.log(mapStack)
}, 250);
});
/**
綁定雙擊事件，并加載上一級地圖
*/
component.context.chart.on('dblclick', function(params) {
//當雙擊事件發生時，清除單擊事件，僅響應雙擊事件
clearTimeout(timeFn);
var map = mapStack.pop();
if (!mapStack.length && !map) {
// alert('已經到達最上一級地圖了');
loadMap1('100000', 'china');
return;
}
loadMap1(map.mapCode, map.mapName);
// scope.component.context.chart.setOption(option, true)
});
break
~~~
九 自定義服務 主要用在配置項
~~~
if (component.type === "DrillDownChinaMap") {
factory._buildChinaAreaMapAreaChartDescription4(chartCategory, scope, element, component, $compile);
var valueMapCategory = {
name: "valueMap",
title: vsLang.area_mapping,
groups: []
};
component.description.categories.push(valueMapCategory);
factory._buildChinamapKeyValueMapChartDescription(valueMapCategory, scope, element, component, $compile);
valueMapCategory.groups.push({
name: "text",
title: {
text: "",
show: false
},
elements: [{
title: vsLang.reload_component,
type: "button",
onClick: function () {
scope.$broadcast(event_refreshChartView, {})
}
}]
})
}
~~~
_buildChinaAreaMapAreaChartDescription4 方法 寫在3 的下面
~~~
_buildChinaAreaMapAreaChartDescription4: function (dataCategory, scope, element, component, $compile) {
dataCategory.groups.push({
name: "text",
title: {
text: vsLang.area_name
},
elements: [{
title: vsLang.text,
type: "switch",
bind: "showItemLabel",
on: vsLang.show,
off: vsLang.hidden
}, {
title: vsLang.size,
type: "configSlide",
bind: "itemLabelSize",
config: {
slideEnd: 100
}
}, {
title: vsLang.color,
type: "colorpicker",
bind: "itemLabelColor"
}]
});
dataCategory.groups.push({
name: "text",
title: {
text: vsLang.area_blocks
},
elements: [{
title: "陰影顏色",
type: "colorpicker",
bind: "areaColor"
}, {
title: vsLang.border_color,
type: "colorpicker",
bind: "areaBorderColor"
}]
});
dataCategory.groups.push({
name: "text",
title: {
text: vsLang.data_range_tool
},
elements: [{
title: vsLang.display,
type: "switch",
bind: "showDataRange",
on: vsLang.on,
off: vsLang.off
}, {
title: vsLang.unit,
type: "text-input-sl",
bind: "dataRangeUnit"
}, {
title: vsLang.orientation,
type: "radio-icon",
bind: "dataRangeOrient",
items: [{
name: vsLang.vertical,
value: "vertical",
icon: "fa fa-ellipsis-v"
}, {
name: vsLang.horizontal,
value: "horizontal",
icon: "fa fa-ellipsis-h"
}]
}, {
title: vsLang.vertical_position_short,
type: "radio-icon",
bind: "dataRangePosY",
items: [{
name: vsLang.position_top,
value: "top",
icon: "fa fa-minus",
pStyle: "padding-top:0;padding-bottom:12px;"
}, {
name: vsLang.position_middle,
value: "center",
icon: "fa fa-minus",
pStyle: "padding-top:6px;padding-bottom:6px;"
}, {
name: vsLang.position_bottom,
value: "bottom",
icon: "fa fa-minus",
pStyle: "padding-top:12px;padding-bottom:0px;"
}]
}, {
title: vsLang.horizontal_position_short,
type: "radio-icon",
bind: "dataRangePosX",
items: [{
name: vsLang.position_left,
value: "left",
icon: "fa fa-align-left"
}, {
name: vsLang.position_center,
value: "center",
icon: "fa fa-align-center"
}, {
name: vsLang.position_right,
value: "right",
icon: "fa fa-align-right"
}]
}, {
title: vsLang.vertical_offset_short,
type: "configSlide",
bind: "dataRangeOffsetY",
config: {
slideEnd: 1000
}
}, {
title: vsLang.horizontal_offset_short,
type: "configSlide",
bind: "dataRangeOffsetX",
config: {
slideEnd: 1000
}
}, {
title: vsLang.font_color,
type: "colorpicker",
bind: "dataRangeFontColor"
}, {
title: vsLang.font_size,
type: "configSlide",
bind: "dataRangeFontSize",
config: {
slideEnd: 100
}
}, {
title: vsLang.width,
type: "configSlide",
bind: "dataRangeWidth",
config: {
slideEnd: 100
}
}, {
title: vsLang.height,
type: "configSlide",
bind: "dataRangeHeight",
config: {
slideEnd: 100
}
}]
});
scope.$watch("component.config.showItemLabel", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.label.show = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.itemLabelSize", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.label.textStyle.fontSize = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.itemLabelColor", function(newValue, oldValue) {
if (isValidColorValue(newValue)) {
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.label.textStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.areaBorderColor", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.borderColor = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.areaColor", function(newValue, oldValue) {
if (isValidColorValue(newValue)) {
var option = component.config.chartConfig;
// console.log(newValue)
option.series[0].itemStyle.normal.shadowColor = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.showDataRange", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.show = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeUnit", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
scope.$broadcast(event_refreshChartView, {})
}
});
scope.$watch("component.config.dataRangeOrient", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.orient = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangePosY", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.y = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeOffsetX", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.x = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeOffsetY", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.y = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangePosX", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.x = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeFontColor", function(newValue, oldValue) {
if (isValidColorValue(newValue)) {
var option = component.config.chartConfig;
if (option.dataRange.textStyle == null) {
option.dataRange.textStyle = {}
}
option.dataRange.textStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeFontSize", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
if (option.dataRange.textStyle == null) {
option.dataRange.textStyle = {}
}
option.dataRange.textStyle.fontSize = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeWidth", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.itemWidth = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.dataRangeHeight", function(newValue, oldValue) {
if (newValue != null && (oldValue == null || oldValue !== newValue)) {
var option = component.config.chartConfig;
option.dataRange.itemHeight = newValue;
scope.component.context.chart.setOption(option, true)
}
})
},
~~~
十 初始化的數據
~~~
// 下鉆地圖
case "DrillDownChinaMap":
// 初始化地圖
option = angular.copy(DrillDownChinaMapoptionTemplate);
// delete option.series[0].markLine;
// delete option.series[0].markPoint;
// delete option.series[0].geoCoord;
// loadMap('100000', 'china');
option.dataRange = {
y: "top",
itemWidth: 12,
itemHeight: 10,
splitList: [{
start: 800,
color: "#006EDD"
}, {
start: 500,
end: 800,
color: "#3892E5"
}, {
start: 300,
end: 500,
color: "#70B6EE"
}, {
start: 100,
end: 300,
color: "#A8DAF6"
}, {
end: 100,
color: "#E0FFFF"
}]
};
option.series[0].data = [
{name:"北京",value:177},
{name:"天津",value:42},
{name:"河北",value:102},
{name:"山西",value:81},
{name:"內蒙古",value:47},
{name:"遼寧",value:67},
{name:"吉林",value:82},
{name:"黑龍江",value:66},
{name:"上海",value:24},
{name:"江蘇",value:92},
{name:"浙江",value:114},
{name:"安徽",value:109},
{name:"福建",value:116},
{name:"江西",value:91},
{name:"山東",value:119},
{name:"河南",value:137},
{name:"湖北",value:116},
{name:"湖南",value:114},
{name:"重慶",value:91},
{name:"四川",value:125},
{name:"貴州",value:62},
{name:"云南",value:83},
{name:"西藏",value:9},
{name:"陜西",value:80},
{name:"甘肅",value:56},
{name:"青海",value:10},
{name:"寧夏",value:18},
{name:"新疆",value:67},
{name:"廣東",value:123},
{name:"廣西",value:59},
{name:"海南",value:14},
{name:'省委',value:190},
{name:'合肥市',value:190},
{name:'六安市',value:190},
{name:'滁州市',value:190},
{name:'蚌埠市',value:190},
{name:'淮南市',value:90},
{name:'宿州市',value:120},
{name:'淮北市',value:120},
{name:'亳州市',value:120},
{name:'阜陽市',value:120},
{name:'安慶市',value:190},
{name:'池州市',value:190},
{name:'黃山市',value:190},
{name:'宣城市',value:190},
{name:'蕪湖市',value:190},
{name:'馬鞍山市',value:190},
{name:'銅陵市',value:90},
];
break;
~~~
十一 初始化判斷組件的大小
~~~
$vsPluginDescriptions.register(new function () {
this.onBuildComponent = function (b) {
console.log(b)
if (b.type === "gauge") {
b.sizeX = 2;
b.sizeY = 10
} else if (b.type === "gauge2") {
b.sizeX = 4;
b.sizeY = 23
} else {
if (b.type === "chinamap" || b.type === "DrillDownChinaMap") {
b.sizeX = 4;
b.sizeY = 18
} else {
b.sizeY = 10
}
}
};
~~~
以上本文件代碼添加完畢
design.js 分享頁添加的代碼
路徑
D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
一 添加提示框 默認開啟
~~~
case "DrillDownChinaMap":
if (component.config.showItemLabel == null) {
component.config.showItemLabel = true
}
option.tooltip.confine = true;
break;
~~~
二 添加處理數據的判斷
~~~
case "DrillDownChinaMap":
internalRefreshChinaDownMapModelData();
break
~~~
三 函數的具體內容
~~~
var internalRefreshChinaDownMapModelData = function () {
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
console.log(data)
console.log(data.length)
var chartData = [];
var chartDataMap = {};
var measureIdx = 0;
console.log(data.length)
for (var i = 0; i < data.length; i++) {
console.log(data[i])
for(var j = 0; j< data[i].length;j++){
console.log(data[i][j])
var value = data[i][j][measures[measureIdx].name];
var name = factory._internalFindKvValue(component, data[i][j][dimensions[i].name]);
// console.log(value)
// console.log(name)
chartData.push({
name: name,
value: value
});
}
}
// console.log(component)
// console.log(chartData)
option.series[0].data = chartData;
component.context.chart.setOption(option, true)
};
~~~
四 同理添加 修改刷新事件里的方法 和設計頁有一點不一樣 看清楚
~~~
scope.$on(event_refreshBindingData,
function(target, param) {
switch (component.type) {
case "DrillDownChinaMap":
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var result = [];
// 拆分數組
for(var i=0,len=dimensions.length;i<len;i+=1){
result.push(dimensions.slice(i,i+1));
}
if (dimensions && dimensions.length > 0 && measures && measures.length > 0) {
var dd = [];
for(var i = 0;i<result.length;i++){
// console.log(result[i])
scope.queryModelData({
eventParam: param,
dimensions: result[i],
measures: measures,
tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
if (response.data.success) {
dd.push(response.data.data.data)
component.context.data = dd;
factory.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
}
break
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
if (dimensions && dimensions.length > 0 && measures && measures.length > 0) {
scope.queryModelData({
eventParam: param,
dimensions: dimensions,
measures: measures,
tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function(response) {
if (response.data.success) {
refreshChartView(scope, element, component, $compile)
} else {
console.log(response.data.message)
}
},
onError: function() {}
})
}
}
});
~~~
、添加處理數據函數
~~~
case "DrillDownChinaMap":
//存儲切換的每一級地圖信息
// const mapStack = [{mapCode: '100000',mapName: 'china'}];
const mapStack = [];
let curMap = {};
var timeFn = null;
var option = component.config.chartConfig;
var mapdata = option.series[0].data;
option.series[0].data = mapdata;
loadMap1('100000', 'china');
function loadMap1(mapCode, mapName) {
console.log(mapCode)
console.log(mapName)
$.ajaxSettings.async = false;
$.getJSON('/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data) {
if (data) {
echarts.registerMap(mapName, data);
console.log(data)
option.series[0].mapType = mapName
console.log(mapName)
scope.component.context.chart.setOption(option, true)
curMap = {
mapCode: mapCode,
mapName: mapName
};
} else {
alert('無法加載該地圖');
}
});
}
/**
綁定用戶切換地圖區域事件
cityMap對象存儲著地圖區域名稱和區域的信息(name-code)
當mapCode有值,說明可以切換到下級地圖
同時保存上級地圖的編號和名稱
*/
component.context.chart.on("mapselectchanged", function (params) {
clearTimeout(timeFn);
if (params.dataIndex < 0) {
return
}
// console.log(params)
timeFn = setTimeout(function(){
const name = params.batch[0].name;
const mapCode = cityMap[name];
console.log(mapCode)
console.log(name);
if (!mapCode) { //如果地圖無法繼續下鉆，則讓點擊的區域呈現選中狀態
option.series[0].data = [{
name: name,
selected: true,
// value:Math.round(Math.random()*1000)
}]
return false;
} else {
loadMap1(mapCode, name);
//將上一級地圖信息壓入mapStack
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName
});
}
// scope.component.context.chart.setOption(option, true)
console.log(mapStack)
}, 250);
});
/**
綁定雙擊事件，并加載上一級地圖
*/
component.context.chart.on('dblclick', function(params) {
//當雙擊事件發生時，清除單擊事件，僅響應雙擊事件
clearTimeout(timeFn);
var map = mapStack.pop();
if (!mapStack.length && !map) {
// alert('已經到達最上一級地圖了');
loadMap1('100000', 'china');
return;
}
loadMap1(map.mapCode, map.mapName);
// scope.component.context.chart.setOption(option, true)
});
break;
~~~
以上 是本文件的修改內容
設計頁 和分享頁 都要加
bug 返回地圖 有時候沒有數據
~~~
var mapdata = option.series[0].data;
option.series[0].data = mapdata;
~~~
- 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說明文檔
- 色斑圖加透明