地图优化
This commit is contained in:
parent
ad9d34e2f9
commit
3eaded1fc5
|
|
@ -44,12 +44,15 @@
|
||||||
在租
|
在租
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="haiNanDao" v-if="mapProps.idType=='0'||mapProps.idType=='5' ">
|
||||||
|
<img src="/src/assets/img/nanhai_dao.png" alt="">
|
||||||
|
</div>
|
||||||
<equipmentDialog></equipmentDialog>
|
<equipmentDialog></equipmentDialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getImg } from "@/utils/index"
|
import { getImg } from "utils/index"
|
||||||
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
||||||
import equipmentDialog from "./equipmentDialog.vue"
|
import equipmentDialog from "./equipmentDialog.vue"
|
||||||
import xnallJSON from './mapData/xnall.json'
|
import xnallJSON from './mapData/xnall.json'
|
||||||
|
|
@ -57,6 +60,7 @@ import gxJSON from './mapData/gx.json'
|
||||||
import gdJSON from './mapData/gd.json'
|
import gdJSON from './mapData/gd.json'
|
||||||
import gzJSON from './mapData/gz.json'
|
import gzJSON from './mapData/gz.json'
|
||||||
import ynJSON from './mapData/yn.json'
|
import ynJSON from './mapData/yn.json'
|
||||||
|
import hnJSON from './mapData/hn.json'
|
||||||
const mapEchartsRef = ref()
|
const mapEchartsRef = ref()
|
||||||
|
|
||||||
const navInfo = reactive({
|
const navInfo = reactive({
|
||||||
|
|
@ -89,7 +93,7 @@ const navInfo = reactive({
|
||||||
{
|
{
|
||||||
text: "海南电网",
|
text: "海南电网",
|
||||||
navId: "5",
|
navId: "5",
|
||||||
jsonData:xnallJSON
|
jsonData:hnJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "储能公司",
|
text: "储能公司",
|
||||||
|
|
@ -183,7 +187,8 @@ const mapProps = reactive({
|
||||||
{ name: '广州', value: [115.261081, 23.139856, 300] },
|
{ name: '广州', value: [115.261081, 23.139856, 300] },
|
||||||
{ name: '南宁', value: [107.45, 22.139856, 400] },
|
{ name: '南宁', value: [107.45, 22.139856, 400] },
|
||||||
{ name: '贵阳', value: [106.7, 26.36, 200] },
|
{ name: '贵阳', value: [106.7, 26.36, 200] },
|
||||||
{ name: '昆明', value: [102.33, 24.23, 300] }]
|
{ name: '昆明', value: [102.33, 24.23, 300] } ,
|
||||||
|
{ name: '昆明', value: [110.33,19.823, 10] }]
|
||||||
})
|
})
|
||||||
|
|
||||||
const mapDataByProvice = (provinceName: String) => {
|
const mapDataByProvice = (provinceName: String) => {
|
||||||
|
|
@ -237,7 +242,17 @@ onBeforeMount(()=>{
|
||||||
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
|
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.haiNanDao{
|
||||||
|
width: 46px;
|
||||||
|
height: 59px;
|
||||||
|
position: absolute;
|
||||||
|
right: 402px;
|
||||||
|
bottom: 6px;
|
||||||
|
img{
|
||||||
|
width: 46px;
|
||||||
|
height: 59px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.top_title {
|
.top_title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding-top: 42px;
|
padding-top: 42px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,453 @@
|
||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"adcode": 460000,
|
||||||
|
"name": "海南省",
|
||||||
|
"center": [
|
||||||
|
110.33119,
|
||||||
|
20.031971
|
||||||
|
],
|
||||||
|
"centroid": [
|
||||||
|
109.754859,
|
||||||
|
19.189767
|
||||||
|
],
|
||||||
|
"childrenNum": 19,
|
||||||
|
"level": "province",
|
||||||
|
"acroutes": [
|
||||||
|
100000
|
||||||
|
],
|
||||||
|
"parent": {
|
||||||
|
"adcode": 100000
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "MultiPolygon",
|
||||||
|
"coordinates": [
|
||||||
|
[
|
||||||
|
[
|
||||||
|
[
|
||||||
|
110.106525,
|
||||||
|
20.026851
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.997638,
|
||||||
|
19.979899
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.965231,
|
||||||
|
19.993608
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.855047,
|
||||||
|
19.984153
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.814307,
|
||||||
|
19.992977
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.761715,
|
||||||
|
19.981317
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.712271,
|
||||||
|
20.017398
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.585328,
|
||||||
|
19.98825
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.526626,
|
||||||
|
19.943494
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.498663,
|
||||||
|
19.873339
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.410794,
|
||||||
|
19.895256
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.349591,
|
||||||
|
19.898724
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.30811,
|
||||||
|
19.9178
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.264592,
|
||||||
|
19.90503
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.255611,
|
||||||
|
19.867189
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.218574,
|
||||||
|
19.855834
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.15913,
|
||||||
|
19.790689
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.169501,
|
||||||
|
19.736724
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.147649,
|
||||||
|
19.704998
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.093668,
|
||||||
|
19.689844
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.048576,
|
||||||
|
19.620051
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.993392,
|
||||||
|
19.586723
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.928671,
|
||||||
|
19.524313
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.887004,
|
||||||
|
19.4897
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.806357,
|
||||||
|
19.450654
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.747654,
|
||||||
|
19.391671
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.694137,
|
||||||
|
19.387084
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.644785,
|
||||||
|
19.349278
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.605712,
|
||||||
|
19.264619
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.591082,
|
||||||
|
19.141587
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.598305,
|
||||||
|
19.055869
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.630434,
|
||||||
|
19.003086
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.637841,
|
||||||
|
18.924593
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.595619,
|
||||||
|
18.872086
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.593212,
|
||||||
|
18.809404
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.659785,
|
||||||
|
18.716846
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.664137,
|
||||||
|
18.673328
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.641082,
|
||||||
|
18.565279
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.644971,
|
||||||
|
18.486741
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.658304,
|
||||||
|
18.462728
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.70997,
|
||||||
|
18.444119
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.776728,
|
||||||
|
18.442051
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.881264,
|
||||||
|
18.416599
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.932374,
|
||||||
|
18.335288
|
||||||
|
],
|
||||||
|
[
|
||||||
|
108.956448,
|
||||||
|
18.307433
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.006632,
|
||||||
|
18.323032
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.108298,
|
||||||
|
18.323828
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.138668,
|
||||||
|
18.267791
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.174686,
|
||||||
|
18.260149
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.28811,
|
||||||
|
18.264925
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.355887,
|
||||||
|
18.214922
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.441349,
|
||||||
|
18.199153
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.4632,
|
||||||
|
18.177171
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.527366,
|
||||||
|
18.169046
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.561718,
|
||||||
|
18.143554
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.63792,
|
||||||
|
18.171595
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.72616,
|
||||||
|
18.177808
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.749863,
|
||||||
|
18.19326
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.783381,
|
||||||
|
18.337516
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.805418,
|
||||||
|
18.347543
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.919676,
|
||||||
|
18.375551
|
||||||
|
],
|
||||||
|
[
|
||||||
|
109.999767,
|
||||||
|
18.359797
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.070785,
|
||||||
|
18.376187
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.090507,
|
||||||
|
18.399258
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.116618,
|
||||||
|
18.506618
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.213931,
|
||||||
|
18.578789
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.246246,
|
||||||
|
18.609619
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.329393,
|
||||||
|
18.642509
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.36754,
|
||||||
|
18.632182
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.495316,
|
||||||
|
18.649976
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.500779,
|
||||||
|
18.752732
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.577908,
|
||||||
|
18.784642
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.590593,
|
||||||
|
18.839082
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.585871,
|
||||||
|
18.897786
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.610593,
|
||||||
|
19.084394
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.619296,
|
||||||
|
19.152041
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.676703,
|
||||||
|
19.286302
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.706517,
|
||||||
|
19.320167
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.730035,
|
||||||
|
19.378859
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.781053,
|
||||||
|
19.395783
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.844015,
|
||||||
|
19.450179
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.920774,
|
||||||
|
19.552598
|
||||||
|
],
|
||||||
|
[
|
||||||
|
111.008921,
|
||||||
|
19.60394
|
||||||
|
],
|
||||||
|
[
|
||||||
|
111.071327,
|
||||||
|
19.628895
|
||||||
|
],
|
||||||
|
[
|
||||||
|
111.044013,
|
||||||
|
19.763551
|
||||||
|
],
|
||||||
|
[
|
||||||
|
111.013643,
|
||||||
|
19.850472
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.969569,
|
||||||
|
20.010151
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.940959,
|
||||||
|
20.028583
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.871515,
|
||||||
|
20.011569
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.808738,
|
||||||
|
20.035672
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.778368,
|
||||||
|
20.068276
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.744665,
|
||||||
|
20.073946
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.717258,
|
||||||
|
20.148734
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.687073,
|
||||||
|
20.16353
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.655685,
|
||||||
|
20.134409
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.56226,
|
||||||
|
20.109691
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.526612,
|
||||||
|
20.075206
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.495039,
|
||||||
|
20.077253
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.387355,
|
||||||
|
20.11347
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.318467,
|
||||||
|
20.109061
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.293282,
|
||||||
|
20.059614
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.24319,
|
||||||
|
20.077568
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.144395,
|
||||||
|
20.074418
|
||||||
|
],
|
||||||
|
[
|
||||||
|
110.106525,
|
||||||
|
20.026851
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -112,6 +112,10 @@ const propsVal = defineProps({
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
|
itemBackgroundStyle:{
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
formatCallBack: {//提示数据格式化
|
formatCallBack: {//提示数据格式化
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => { }
|
default: () => { }
|
||||||
|
|
@ -148,13 +152,17 @@ const handleSeriesData = () => {
|
||||||
color: resultEmphasisColor
|
color: resultEmphasisColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
backgroundStyle:{},
|
||||||
data: propsVal.seriseData
|
data: propsVal.seriseData
|
||||||
}
|
}
|
||||||
item.label = propsVal.stackLabel
|
item.label = propsVal.stackLabel
|
||||||
if (propsVal.barWidth) {
|
if (propsVal.barWidth) {
|
||||||
item.barWidth = propsVal.barWidth
|
item.barWidth = propsVal.barWidth
|
||||||
}
|
}
|
||||||
|
if(propsVal.itemBackgroundStyle){
|
||||||
|
item.showBackground=true
|
||||||
|
item.backgroundStyle.color = propsVal.itemBackgroundStyle
|
||||||
|
}
|
||||||
seriesData.push(item)
|
seriesData.push(item)
|
||||||
return seriesData
|
return seriesData
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,7 @@ const initEcharts = () => {
|
||||||
geo: {
|
geo: {
|
||||||
map: 'guangdong',
|
map: 'guangdong',
|
||||||
zoom: 1,
|
zoom: 1,
|
||||||
roam: 'move',
|
roam: '',
|
||||||
label: propsVal.labelInfo,
|
label: propsVal.labelInfo,
|
||||||
// 所有地图的区域颜色
|
// 所有地图的区域颜色
|
||||||
itemStyle: propsVal.itemStyle,
|
itemStyle: propsVal.itemStyle,
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,7 @@
|
||||||
:emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle"
|
:emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle"
|
||||||
:itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
|
:itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
|
||||||
:stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
|
:stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
|
||||||
|
:itemBackgroundStyle="barComPropsHorizontal.itemBackgroundStyle"
|
||||||
:formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
|
:formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -313,6 +314,7 @@ const barComPropsHorizontal = reactive({
|
||||||
},
|
},
|
||||||
borderRadius: 0,
|
borderRadius: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
itemBackgroundStyle:"rgba(255,255,255,0.05)",
|
||||||
formatCallBack: (params: any) => {
|
formatCallBack: (params: any) => {
|
||||||
if (!params || params.length == 0 || !Array.isArray(params)) return
|
if (!params || params.length == 0 || !Array.isArray(params)) return
|
||||||
let fromatStr = ""
|
let fromatStr = ""
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue