一 同下鉆地圖一樣用的地區數據包
路徑：D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js
添加地區地圖
~~~
{
name: "",
type: "echartsRegionMap",
coverImage: contextPath + "/images/componenttypes/" + locale + "/widget/zh_baiduMap.png?v=3",
coverImageWidth: "50%",
tip: "地區地圖"
}
~~~
option 對象模板
~~~
// 地區地圖
//初始化地圖
echartsRegionMapoptionTemplate = {
animationDuration: 500,
// backgroundColor: "#154e90",
title: {
show: false,
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
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: []
}]
};
~~~
在地圖 factory 對象里添加
angular.coye 方法里添加option模板
~~~
// 地區地圖
case "echartsRegionMap":
// 初始化地圖
option = angular.copy(echartsRegionMapoptionTemplate);
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 = "";
break;
~~~
添加判斷屬性調用處理數據的函數
~~~
case "echartsRegionMap":
internalRefreshChinaRegionMapModelData();
break;
~~~
添加數據處理函數
~~~
// 地區地圖
var internalRefreshChinaRegionMapModelData = 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;
if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) {
var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures);
for (var i = 0; i < measures.length; i++) {
if (newMeasures[i] != null) {
measureIdx = i;
break
}
}
}
for (var i = 0; i < data.length; i++) {
var value = data[i][measures[measureIdx].name];
var name = factory._internalFindKvValue(component, data[i][dimensions[dimensions.length - 1].name]);
chartData.push({
name: name,
value: value
});
var dataMap = chartDataMap[data[i][dimensions[dimensions.length - 1].name]];
if (dataMap == null) {
dataMap = {};
chartDataMap[name] = dataMap
}
for (var m = 0; m < measures.length; m++) {
dataMap[measures[m].name] = data[i][measures[m].name]
}
}
console.log(chartData)
// 值域處理
var thresholdConfig = component.config.thresholdConfig[measures[measureIdx].name];
var splitList = [];
if (thresholdConfig != null && thresholdConfig.length > 0) {
var valueType = component.config["thresholdValueType_" + measures[measureIdx].name];
if (valueType == null) {
valueType = "value"
}
var maxValue = parseFloat(component.config["maxValue_" + measures[measureIdx].name]);
var minValue = parseFloat(component.config["minValue_" + measures[measureIdx].name]);
if (isNaN(maxValue) || isNaN(minValue)) {
var calculatedMaxValue = -9999999999;
var calculatedMinValue = 9999999999;
for (var i = 0; i < data.length; i++) {
var value = data[i][measures[measureIdx].name];
calculatedMaxValue = Math.max(calculatedMaxValue, parseFloat(value));
calculatedMinValue = Math.min(calculatedMinValue, parseFloat(value))
}
if (isNaN(maxValue)) {
maxValue = calculatedMaxValue
}
if (isNaN(minValue)) {
minValue = calculatedMinValue
}
}
var minToMaxValue = maxValue - minValue;
for (var i = 0; i < thresholdConfig.length; i++) {
var fromValue = parseFloat(component.config[thresholdConfig[i].fromBind]);
var toValue = parseFloat(component.config[thresholdConfig[i].toBind]);
if (isNaN(fromValue) && isNaN(toValue)) {
continue
}
if (valueType === "percent") {
fromValue = fromValue * minToMaxValue;
toValue = toValue * minToMaxValue
}
var color = component.config[thresholdConfig[i].colorBind];
var item = {
color: color
};
if (!isNaN(fromValue)) {
item.start = fromValue
}
if (!isNaN(toValue)) {
item.end = toValue
}
if (component.config.dataRangeUnit) {
if (item.start == null) {
item.label = "< " + item.end
} else {
if (item.end == null) {
item.label = "> " + item.start
} else {
item.label = item.start + " - " + item.end
}
}
item.label = item.label + component.config.dataRangeUnit
}
splitList.push(item)
}
}
if (splitList.length === 0) {
splitList = [{
start: 0,
color: "#A8DAF6"
}]
}
// 值域end
option.dataRange.splitList = splitList;
option.series[0].data = chartData;
component.context.chart.setOption(option, true)
}
~~~
添加接收其他組件數據方法
~~~
case "echartsRegionMap":
var dataIndex = -1;
// console.log(component.config.chartConfig)
var option = component.config.chartConfig;
console.log(option)
for (var i = 0; i < component.config.chartConfig.series[0].data.length; i++) {
if ("" + component.config.chartConfig.series[0].data[i].name === "" + event.source.value) {
console.log(component.config.chartConfig.series[0].data[i].name)
dataIndex = i;
break
}
}
console.log(dataIndex)
if (dataIndex < 0) {
component.context.chart.dispatchAction({
type: "hideTip"
});
return
}
if (dataIndex > -1) {
console.log(event.source.value)
component.context.chart.dispatchAction({
type: "showTip",
name: event.source.value,
seriesIndex: 0
})
}
break;
~~~
添加在下鉆地圖下面 數據處理和推動聯動數據函數
~~~
// 地區地圖
case "echartsRegionMap":
// 數據處理
var option = component.config.chartConfig;
var optionNode = component.config;
if(optionNode.curlMap){
loadMap(optionNode.curlMap.mapCode, optionNode.curlMap.mapName);
}else{
loadMap('100000', 'china');
}
// var mapdata = option.series[0].data;
// option.series[0].data = mapdata;
function loadMap(mapCode, mapName) {
$.ajaxSettings.async = false;
$.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) {
if (data1) {
// console.log(data1)
echarts.registerMap(mapName, data1);
// console.log(data1)
option.series[0].mapType = mapName
// console.log(mapName)
scope.component.context.chart.setOption(option, true)
curlMap = {
mapCode: mapCode,
mapName: mapName
};
// console.log(curlMap)
} else {
alert('無法加載該地圖');
}
});
}
// 推送數據
component.context.chart.on("mouseover", function (param) {
if (component.config.datasourceConfig.measures == null || component.config.datasourceConfig.dimensions == null) {
return
}
var data = component.context.data;
var dataIndex = param.dataIndex;
var to = param.data.name;
if (to == null || param.value == null || param.value === "-") {
return
}
component.context.tooltipName = to;
scope.notifyDimensionValueChange(null, scope.getLastDimension(), to)
});
break;
~~~
同在下鉆地圖下面 加同的代碼 度量的里的文字 和百分比代碼
~~~
case "echartsRegionMap":
groupDesc.elements.push({
title: vsLang.value_type,
type: "radio-icon",
bind: "valueType" + identifier,
items: [{
name: vsLang.value_original,
icon: "fa fa-font",
value: "value"
}, {
name: vsLang.value_percent,
icon: "fa fa-percent",
value: "percent"
}]
});
break;
~~~
在關系圖下面添加圖形里的配置項
~~~
// echarts 地區地圖
case "echartsRegionMap":
chartCategory.groups.push({
title: {
text: "配置地區"
},
elements: [{
title: "省份",
type: "select-s",
bind: "provinceObj",
items: [{
name: "北京",
value: "110000"
}, {
name: "天津",
value: "120000"
}, {
name: "上海",
value: "310000"
}, {
name: "重慶",
value: "500000"
},{
name: "河北",
value: "130000"
}, {
name: "山西",
value: "140000"
}, {
name: "內蒙古",
value: "150000"
}, {
name: "遼寧",
value: "210000"
}, {
name: "吉林",
value: "220000"
}, {
name: "黑龍江",
value: "230000"
}, {
name: "江蘇",
value: "320000"
}, {
name: "浙江",
value: "330000"
}, {
name: "安徽",
value: "340000"
}, {
name: "福建",
value: "350000"
}, {
name: "江西",
value: "360000"
}, {
name: "山東",
value: "370000"
}, {
name: "河南",
value: "410000"
}, {
name: "湖北",
value: "420000"
}, {
name: "湖南",
value: "430000"
}, {
name: "廣東",
value: "440000"
}, {
name: "廣西",
value: "450000"
}, {
name: "海南",
value: "460000"
}, {
name: "四川",
value: "510000"
}, {
name: "貴州",
value: "520000"
}, {
name: "云南",
value: "530000"
}, {
name: "西藏",
value: "540000"
}, {
name: "陜西",
value: "610000"
}, {
name: "青海",
value: "630000"
}, {
name: "寧夏",
value: "640000"
}, {
name: "新疆",
value: "650000"
}, {
name: "香港",
value: "810000"
}, {
name: "澳門",
value: "820000"
}, {
name: "臺灣",
value: "710000"
}]
},{
title: "市級",
type: "select-s",
bind: "cityObj",
items: []
}]
})
chartCategory.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"
}]
});
chartCategory.groups.push({
name: "text",
title: {
text: vsLang.area_blocks
},
elements: [{
title: "陰影顏色",
type: "colorpicker",
bind: "areaColor"
}, {
title: vsLang.border_color,
type: "colorpicker",
bind: "areaBorderColor"
}]
});
chartCategory.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
}
}]
});
break
~~~
在關系圖下面添加 監聽配置項
~~~
// 地區地圖
case "echartsRegionMap":
// 選擇省份
scope.$watch("component.config.provinceObj", function (newValue, oldValue) {
if (newValue != null && newValue !== oldValue) {
var option = component.config.chartConfig;
var optionNode = component.config;
scope.component.description.categories[6].groups[0].elements[1].items = [];
// console.log(optionNode)
// console.log(newValue)
loadMap(newValue.value,newValue.name);
function loadMap(mapCode, mapName) {
$.ajaxSettings.async = false;
$.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) {
if (data1) {
console.log(data1)
for(var i = 0;i<data1.features.length;i++){
// console.log(data1.features[i])
var name = data1.features[i].properties.name;
var id = data1.features[i].id;
scope.component.description.categories[6].groups[0].elements[1].items.push({
name: name,
value: id
})
}
echarts.registerMap(mapName, data1);
// console.log(data1)
option.series[0].mapType = mapName
// console.log(mapName)
scope.component.context.chart.setOption(option, true)
curlMap = {
mapCode: mapCode,
mapName: mapName
};
// console.log(curlMap);
optionNode.curlMap = curlMap;
// console.log(optionNode);
} else {
alert('無法加載該地圖');
}
});
}
// console.log(scope.component.description.categories[6].groups[0].elements[1].items)
}
});
// 選擇市區
scope.$watch("component.config.cityObj", function (newValue, oldValue) {
if (newValue != null && newValue !== oldValue) {
var option = component.config.chartConfig;
var optionNode = component.config;
// console.log(optionNode)
// console.log(newValue)
loadMap(newValue.value,newValue.name);
function loadMap(mapCode, mapName) {
$.ajaxSettings.async = false;
$.getJSON(contextPath + '/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)
curlMap = {
mapCode: mapCode,
mapName: mapName
};
// console.log(curlMap);
optionNode.curlMap = curlMap;
// console.log(optionNode);
} else {
alert('無法加載該地圖');
}
});
}
// console.log(scope.component.description.categories[6].groups[0].elements[1].items)
}
});
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)
}
})
break;
~~~
分享頁 路勁：
一 添加 數據處理函數調用函數
~~~
case "echartsRegionMap":
internalRefreshChinaRegionMapModelData();
break;
~~~
二 添加 數據函數
~~~
// 地區地圖 數據處理函數
var internalRefreshChinaRegionMapModelData = 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;
if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) {
var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures);
for (var i = 0; i < measures.length; i++) {
if (newMeasures[i] != null) {
measureIdx = i;
break
}
}
}
for (var i = 0; i < data.length; i++) {
var value = data[i][measures[measureIdx].name];
var name = factory._internalFindKvValue(component, data[i][dimensions[dimensions.length - 1].name]);
chartData.push({
name: name,
value: value
});
var dataMap = chartDataMap[data[i][dimensions[dimensions.length - 1].name]];
if (dataMap == null) {
dataMap = {};
chartDataMap[name] = dataMap
}
for (var m = 0; m < measures.length; m++) {
dataMap[measures[m].name] = data[i][measures[m].name]
}
}
// console.log(chartData)
// 值域處理
var thresholdConfig = component.config.thresholdConfig[measures[measureIdx].name];
var splitList = [];
if (thresholdConfig != null && thresholdConfig.length > 0) {
var valueType = component.config["thresholdValueType_" + measures[measureIdx].name];
if (valueType == null) {
valueType = "value"
}
var maxValue = parseFloat(component.config["maxValue_" + measures[measureIdx].name]);
var minValue = parseFloat(component.config["minValue_" + measures[measureIdx].name]);
if (isNaN(maxValue) || isNaN(minValue)) {
var calculatedMaxValue = -9999999999;
var calculatedMinValue = 9999999999;
for (var i = 0; i < data.length; i++) {
var value = data[i][measures[measureIdx].name];
calculatedMaxValue = Math.max(calculatedMaxValue, parseFloat(value));
calculatedMinValue = Math.min(calculatedMinValue, parseFloat(value))
}
if (isNaN(maxValue)) {
maxValue = calculatedMaxValue
}
if (isNaN(minValue)) {
minValue = calculatedMinValue
}
}
var minToMaxValue = maxValue - minValue;
for (var i = 0; i < thresholdConfig.length; i++) {
var fromValue = parseFloat(component.config[thresholdConfig[i].fromBind]);
var toValue = parseFloat(component.config[thresholdConfig[i].toBind]);
if (isNaN(fromValue) && isNaN(toValue)) {
continue
}
if (valueType === "percent") {
fromValue = fromValue * minToMaxValue;
toValue = toValue * minToMaxValue
}
var color = component.config[thresholdConfig[i].colorBind];
var item = {
color: color
};
if (!isNaN(fromValue)) {
item.start = fromValue
}
if (!isNaN(toValue)) {
item.end = toValue
}
if (component.config.dataRangeUnit) {
if (item.start == null) {
item.label = "< " + item.end
} else {
if (item.end == null) {
item.label = "> " + item.start
} else {
item.label = item.start + " - " + item.end
}
}
item.label = item.label + component.config.dataRangeUnit
}
splitList.push(item)
}
}
if (splitList.length === 0) {
splitList = [{
start: 0,
color: "#A8DAF6"
}]
}
// 值域end
option.dataRange.splitList = splitList;
option.series[0].data = chartData;
component.context.chart.setOption(option, true)
}
~~~
接收 數據函數
~~~
case "echartsRegionMap":
var dataIndex = -1;
// console.log(component.config.chartConfig)
var option = component.config.chartConfig;
// console.log(option)
for (var i = 0; i < component.config.chartConfig.series[0].data.length; i++) {
if ("" + component.config.chartConfig.series[0].data[i].name === "" + event.source.value) {
// console.log(component.config.chartConfig.series[0].data[i].name)
dataIndex = i;
break
}
}
// console.log(dataIndex)
if (dataIndex < 0) {
component.context.chart.dispatchAction({
type: "hideTip"
});
return
}
if (dataIndex > -1) {
// console.log(event.source.value)
component.context.chart.dispatchAction({
type: "showTip",
name: event.source.value,
seriesIndex: 0
})
}
break;
~~~
添加獲取 json數據和推送聯動數據
~~~
case "echartsRegionMap":
// 數據處理
var option = component.config.chartConfig;
var optionNode = component.config;
if(optionNode.curlMap){
loadMap(optionNode.curlMap.mapCode, optionNode.curlMap.mapName);
}else{
loadMap('100000', 'china');
}
// var mapdata = option.series[0].data;
// option.series[0].data = mapdata;
function loadMap(mapCode, mapName) {
$.ajaxSettings.async = false;
$.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) {
if (data1) {
// console.log(data1)
echarts.registerMap(mapName, data1);
// console.log(data1)
option.series[0].mapType = mapName
// console.log(mapName)
scope.component.context.chart.setOption(option, true)
curlMap = {
mapCode: mapCode,
mapName: mapName
};
// console.log(curlMap)
} else {
alert('無法加載該地圖');
}
});
}
// 推送數據
component.context.chart.on("mouseover", function (param) {
if (component.config.datasourceConfig.measures == null || component.config.datasourceConfig.dimensions == null) {
return
}
var data = component.context.data;
var dataIndex = param.dataIndex;
var to = param.data.name;
if (to == null || param.value == null || param.value === "-") {
return
}
component.context.tooltipName = to;
scope.notifyDimensionValueChange(null, scope.getLastDimension(), to)
});
break;
~~~
在下鉆地圖 上方寫 度量設置單位 小數點 別名 等等
~~~
case "echartsRegionMap":
if (component.config.showItemLabel == null) {
component.config.showItemLabel = true
}
option.tooltip.confine = true;
option.tooltip.formatter = function(params) {
var res = params.name;
var dataMap = component.context.data[params.dataIndex];
if (dataMap != null) {
var measures = component.config.datasourceConfig.measures;
for (var i = 0; i < measures.length; i++) {
res += "<br/>";
var unit = component.config["unit_" + i];
if (unit == null) {
unit = ""
}
var value = dataMap[measures[i].name];
if (component.config["valueType_" + i] != null && component.config["valueType_" + i] === "percent") {
value = value * 100;
unit = "%"
}
value = $vsUtils.processValue(value, component.config["digit_" + i]);
value = $vsUtils.comdifyValue(value);
var measureLabel = measures[i].label;
if (component.config["measureAlias_" + i] != null && component.config["measureAlias_" + i].length > 0) {
measureLabel = component.config["measureAlias_" + i]
}
res += measureLabel + " : " + value + unit
}
return res
} else {
return null
}
};
break;
~~~
ps 合并的時候在js文件上看 位置吧 ！！！！！
- 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說明文檔
- 色斑圖加透明