地图优化
This commit is contained in:
parent
ad9d34e2f9
commit
3eaded1fc5
|
|
@ -44,12 +44,15 @@
|
|||
在租
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImg } from "@/utils/index"
|
||||
import { getImg } from "utils/index"
|
||||
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
||||
import equipmentDialog from "./equipmentDialog.vue"
|
||||
import xnallJSON from './mapData/xnall.json'
|
||||
|
|
@ -57,6 +60,7 @@ import gxJSON from './mapData/gx.json'
|
|||
import gdJSON from './mapData/gd.json'
|
||||
import gzJSON from './mapData/gz.json'
|
||||
import ynJSON from './mapData/yn.json'
|
||||
import hnJSON from './mapData/hn.json'
|
||||
const mapEchartsRef = ref()
|
||||
|
||||
const navInfo = reactive({
|
||||
|
|
@ -89,7 +93,7 @@ const navInfo = reactive({
|
|||
{
|
||||
text: "海南电网",
|
||||
navId: "5",
|
||||
jsonData:xnallJSON
|
||||
jsonData:hnJSON
|
||||
},
|
||||
{
|
||||
text: "储能公司",
|
||||
|
|
@ -183,7 +187,8 @@ const mapProps = reactive({
|
|||
{ name: '广州', value: [115.261081, 23.139856, 300] },
|
||||
{ name: '南宁', value: [107.45, 22.139856, 400] },
|
||||
{ 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) => {
|
||||
|
|
@ -237,7 +242,17 @@ onBeforeMount(()=>{
|
|||
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.haiNanDao{
|
||||
width: 46px;
|
||||
height: 59px;
|
||||
position: absolute;
|
||||
right: 402px;
|
||||
bottom: 6px;
|
||||
img{
|
||||
width: 46px;
|
||||
height: 59px;
|
||||
}
|
||||
}
|
||||
.top_title {
|
||||
font-size: 20px;
|
||||
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,
|
||||
default: 0
|
||||
},
|
||||
itemBackgroundStyle:{
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
formatCallBack: {//提示数据格式化
|
||||
type: Function,
|
||||
default: () => { }
|
||||
|
|
@ -148,13 +152,17 @@ const handleSeriesData = () => {
|
|||
color: resultEmphasisColor
|
||||
}
|
||||
},
|
||||
|
||||
backgroundStyle:{},
|
||||
data: propsVal.seriseData
|
||||
}
|
||||
item.label = propsVal.stackLabel
|
||||
if (propsVal.barWidth) {
|
||||
item.barWidth = propsVal.barWidth
|
||||
}
|
||||
if(propsVal.itemBackgroundStyle){
|
||||
item.showBackground=true
|
||||
item.backgroundStyle.color = propsVal.itemBackgroundStyle
|
||||
}
|
||||
seriesData.push(item)
|
||||
return seriesData
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ const initEcharts = () => {
|
|||
geo: {
|
||||
map: 'guangdong',
|
||||
zoom: 1,
|
||||
roam: 'move',
|
||||
roam: '',
|
||||
label: propsVal.labelInfo,
|
||||
// 所有地图的区域颜色
|
||||
itemStyle: propsVal.itemStyle,
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@
|
|||
:emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle"
|
||||
:itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
|
||||
:stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
|
||||
:itemBackgroundStyle="barComPropsHorizontal.itemBackgroundStyle"
|
||||
:formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
|
||||
</div>
|
||||
|
||||
|
|
@ -313,6 +314,7 @@ const barComPropsHorizontal = reactive({
|
|||
},
|
||||
borderRadius: 0,
|
||||
barWidth: 14,
|
||||
itemBackgroundStyle:"rgba(255,255,255,0.05)",
|
||||
formatCallBack: (params: any) => {
|
||||
if (!params || params.length == 0 || !Array.isArray(params)) return
|
||||
let fromatStr = ""
|
||||
|
|
|
|||
Loading…
Reference in New Issue