ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

静态气泡地图更新

Browse Source
qianming 3 years ago
parent ecd32b37c8
commit 27f8238786
1 changed files with 116 additions and 106 deletions
Show Stats Download Patch File Download Diff File

222
report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options" autoresize/>
</div> </div>
</template> </template>
<script> <script>
@ -47,7 +47,7 @@ var data = [
{ {
name: "南海诸岛", name: "南海诸岛",
value: 1 value: 1
}, },
{ {
name: "北京", name: "北京",
value: 524 value: 524
@ -185,7 +185,7 @@ var data = [
value: 9 value: 9
}, },
]; ];
var convertData = function(data) { var convertData = function (data) {
var res = []; var res = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]; var geoCoord = geoCoordMap[data[i].name];
@ -209,17 +209,17 @@ export default {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean
}, },
data (){ data() {
return { return {
options : { options: {
//backgroundColor: '#0F1C3C', //backgroundColor: '#0F1C3C',
tooltip: { tooltip: {
show: true, show: true,
formatter: function(params) { formatter: function (params) {
if (params.value.length > 1) { if (params.value.length > 1) {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '人&nbsp;&nbsp;'; return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
} else { } else {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '人&nbsp;&nbsp;'; return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
} }
}, },
}, },
@ -249,109 +249,118 @@ export default {
} }
} }
}, },
series: [{ series: [
type: 'map', {
map: 'china', type: 'map',
aspectScale: 0.75, map: 'china',
//zoom:1.1, aspectScale: 0.75,
label: { label: {
normal: { normal: {
show: false, //formatter: '{b}',
}, position: 'right',
emphasis: { show: true,
show: false, color: '#53D9FF',
} fontSize: 15
},
itemStyle: {
normal: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0% 处的颜色
}, {
offset: 1,
color: '#061E3D' // 100% 处的颜色
}],
}, },
borderColor: '#215495', emphasis: {
borderWidth: 1, show: true,
},
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0% 处的颜色
}, {
offset: 1,
color: '#061E3D' // 100% 处的颜色
}],
}, },
} },
}, itemStyle: {
data: data, normal: {
}, //地图块颜色
{type: 'effectScatter', areaColor: {
coordinateSystem: 'geo', x: 0,
rippleEffect: { y: 0,
brushType: 'stroke' x2: 0,
}, y2: 1,
showEffectOn: 'render', colorStops: [{
itemStyle: { offset: 0,
normal: { color: '#073684' // 0% 处的颜色
color: { }, {
type: 'radial', offset: 1,
x: 0.5, color: '#061E3D' // 100% 处的颜色
y: 0.5, }],
r: 0.5, },
colorStops: [{ borderColor: '#215495',
offset: 0, borderWidth: 1,
color: 'rgba(5,80,151,0.2)'
}, {
offset: 0.8,
color: 'rgba(5,80,151,0.8)'
}, {
offset: 1,
color: 'rgba(0,108,255,0.7)'
}],
global: false // 缺省为 false
}, },
} //鼠标放置颜色加深
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0% 处的颜色
}, {
offset: 1,
color: '#2B91B7' // 100% 处的颜色
}],
},
}
},
data: data,
}, },
label: { {
normal: { type: 'effectScatter',
show: true, coordinateSystem: 'geo',
color: '#fff', rippleEffect: {
fontWeight: 'bold', brushType: 'stroke'
position: 'inside', },
formatter: function(para) { showEffectOn: 'render',
return '{cnNum|' + para.data.value[2] + '}' itemStyle: {
}, normal: {
rich: { //气泡颜色
cnNum: { color: {
fontSize: 13, type: 'radial',
color: '#D4EEFF', x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'rgba(5,80,151,0.2)'
}, {
offset: 0.8,
color: 'rgba(5,80,151,0.8)'
}, {
offset: 1,
color: 'rgba(0,108,255,0.7)'
}],
global: false // 缺省为 false
},
}
},
label: {
normal: {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'inside',
formatter: function (para) {
return '{cnNum|' + para.data.value[2] + '}'
},
rich: {
cnNum: {
fontSize: 13,
color: '#D4EEFF',
}
} }
},
},
symbol: 'circle',
symbolSize: function (val) {
if (val[2] == 0) {
return 0;
} }
;
return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2;
}, },
}, data: convertData(data),
symbol: 'circle', zlevel: 1,
symbolSize: function(val) { }]
if (val[2] == 0) {
return 0;
};
return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2;
},
data: convertData(data),
zlevel: 1,
}]
}, },
optionsSetup: {} optionsSetup: {}
} }
@ -406,8 +415,8 @@ export default {
}; };
this.options.title = title; this.options.title = title;
}, },
setdata(outname,outvalue){ setdata(outname, outvalue) {
const outdata={} const outdata = {}
for (var i = 0; i < outname.length; i++) { for (var i = 0; i < outname.length; i++) {
outdata.push({ outdata.push({
name: outname[i], name: outname[i],
@ -463,6 +472,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;

Write Preview
Loading…
Cancel
Save