增加一张静态气泡地图

qianming 3 years ago
parent c64b9e92ef
commit ecd32b37c8

@ -30,4 +30,3 @@ mv $BuildDir/report-core/target/report-core-1.0.0-SNAPSHOT-assembly.zip $BuildDi
cd $BuildDir/ cd $BuildDir/
rm -rf $BuildDir/report-core/src/main/resources/static rm -rf $BuildDir/report-core/src/main/resources/static
git reset --hard >/dev/null 2>&1

@ -306,10 +306,10 @@ const widgetTools = [
/* { /* {
type: 'el-input-number', type: 'el-input-number',
label: '滚动速度', label: '滚动速度',
name: 'marqueeQuit', name: 'jScrollPane',
required: false, //required: false,
placeholder: '', placeholder: '',
value: '1', value: '50',
}*/ }*/
], ],
// 数据 // 数据
@ -5692,6 +5692,337 @@ const widgetTools = [
], ],
}, },
}, },
{
code: 'widgetAirBubbleMap',
type: 'chart',
label: '气泡地图',
icon: 'iconzhongguoditu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '气泡地图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
/* {
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},*/
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#FF801C'}, {color: '#F5FF46'}, {color: '#00FE65'}, {color: '#00FEFF'}, {color: '#ffa800'}]
},
],
},
],
],
data: [],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
}
},
] ]
const getToolByCode = function (code) { const getToolByCode = function (code) {

@ -0,0 +1,471 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
</div>
</template>
<script>
import echarts from "echarts";
import "../../../../../../../node_modules/echarts/map/js/china.js";
//https://www.makeapie.com/editor.html?c=x2yaz6dfRw
//https://www.makeapie.com/editor.html?c=xMpGBbTEKU
var geoCoordMap = {
'台湾': [121.5135, 25.0308],
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
};
var data = [
{
name: "南海诸岛",
value: 1
},
{
name: "北京",
value: 524
},
{
name: "天津",
value: 14
},
{
name: "上海",
value: 150
},
{
name: "重庆",
value: 75
},
{
name: "河北",
value: 13
},
{
name: "河南",
value: 83
},
{
name: "云南",
value: 11
},
{
name: "辽宁",
value: 19
},
{
name: "黑龙江",
value: 15
},
{
name: "湖南",
value: 69
},
{
name: "安徽",
value: 260
},
{
name: "山东",
value: 39
},
{
name: "新疆",
value: 4
},
{
name: "江苏",
value: 31
},
{
name: "浙江",
value: 104
},
{
name: "江西",
value: 36
},
{
name: "湖北",
value: 1052
},
{
name: "广西",
value: 33
},
{
name: "甘肃",
value: 347
},
{
name: "山西",
value: 8
},
{
name: "内蒙古",
value: 157
},
{
name: "陕西",
value: 22
},
{
name: "吉林",
value: 4
},
{
name: "福建",
value: 36
},
{
name: "贵州",
value: 39
},
{
name: "广东",
value: 996
},
{
name: "青海",
value: 27
},
{
name: "西藏",
value: 31
},
{
name: "四川",
value: 46
},
{
name: "宁夏",
value: 16
},
{
name: "海南",
value: 22
},
{
name: "台湾",
value: 6
},
{
name: "香港",
value: 2
},
{
name: "澳门",
value: 9
},
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var max = 6000,
min = 10;
var maxSize4Pin = 100,
minSize4Pin = 20;
export default {
name: "widgetAirBubbleMap",
props: {
value: Object,
ispreview: Boolean
},
data (){
return {
options : {
//backgroundColor: '#0F1C3C',
tooltip: {
show: true,
formatter: function(params) {
if (params.value.length > 1) {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '人&nbsp;&nbsp;';
} else {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '人&nbsp;&nbsp;';
}
},
},
geo: {
map: 'china',
show: true,
roam: false,
label: {
emphasis: {
show: false
}
},
layoutSize: "80%",
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00F6FF'
}, {
offset: 1,
color: '#53D9FF'
}], false),
borderWidth: 3,
shadowColor: 'rgba(10,76,139,1)',
shadowOffsetY: 0,
shadowBlur: 60
}
}
},
series: [{
type: 'map',
map: 'china',
aspectScale: 0.75,
//zoom:1.1,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0%
}, {
offset: 1,
color: '#061E3D' // 100%
}],
},
borderColor: '#215495',
borderWidth: 1,
},
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0%
}, {
offset: 1,
color: '#061E3D' // 100%
}],
},
}
},
data: data,
},
{type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: {
type: 'radial',
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),
zlevel: 1,
}]
},
optionsSetup: {}
}
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
},
mounted() {
},
methods: {
// options
editorOptions() {
this.setOptionsTitle();
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.show = optionsCollapse.isNoTitle;
title.text = optionsCollapse.titleText;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
};
this.options.title = title;
},
setdata(outname,outvalue){
const outdata={}
for (var i = 0; i < outname.length; i++) {
outdata.push({
name: outname[i],
value: outvalue[i]
})
}
return outdata
},
//
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = JSON.parse(val);
for (const key in this.options.series) {
if (this.options.series[key].type == "china") {
this.options.series[key].data = staticData;
}
}
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
for (const key in this.options.series) {
if (this.options.series[key].type == "china") {
this.options.series[key].data = val;
}
}
}
}
};
</script>
<style lang="scss" scoped>
.echartMap {
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -31,6 +31,7 @@ import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRoseArea";
import widgetTable from "./widgetTable.vue"; import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue"; import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
components: { components: {
@ -53,7 +54,8 @@ export default {
WidgetPieNightingaleRoseArea, WidgetPieNightingaleRoseArea,
widgetTable, widgetTable,
widgetMap, widgetMap,
widgetPiePercentageChart widgetPiePercentageChart,
widgetAirBubbleMap
}, },
model: { model: {
prop: "value", prop: "value",

@ -41,6 +41,7 @@ import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRoseArea";
import widgetTable from "./widgetTable.vue"; import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue"; import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
export default { export default {
name: "Widget", name: "Widget",
components: { components: {
@ -63,7 +64,8 @@ export default {
WidgetPieNightingaleRoseArea, WidgetPieNightingaleRoseArea,
widgetTable, widgetTable,
widgetMap, widgetMap,
widgetPiePercentageChart widgetPiePercentageChart,
widgetAirBubbleMap
}, },
model: { model: {
prop: "value", prop: "value",

Loading…
Cancel
Save