Skip to content

D
dashboard
Commit 690c0b6b authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

测试地图

parent 1e1f3fbe
Hide whitespace changes
Inline Side-by-side
Showing with 1665 additions and 25 deletions
index.html
View file @ 690c0b6b
...@@ -10,19 +10,10 @@ ...@@ -10,19 +10,10 @@
font-size: 1vw; font-size: 1vw;
} }
</style> </style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
<script>
// (function() {
// function setWidth() {
// const width = document.body.clientWidth
// document.getElementById('html').style.fontSize = (width / 120).toFixed(1) + 'px'
// }
// window.onload = setWidth()
// window.onresize = setWidth
// })()
</script>
package-lock.json
View file @ 690c0b6b
...@@ -607,6 +607,38 @@ ...@@ -607,6 +607,38 @@
"integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=", "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=",
"dev": true "dev": true
}, },
"axios": {
"version": "0.19.0",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.0.tgz",
"integrity": "sha1-jgm/89kSLhM/e4EByPvdAO09Krg=",
"requires": {
"follow-redirects": "1.5.10",
"is-buffer": "^2.0.2"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz",
"integrity": "sha1-PlcvI8hBGlz9lVfISeNmXgspBiM="
}
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
...@@ -1642,6 +1674,14 @@ ...@@ -1642,6 +1674,14 @@
"qs": "6.7.0", "qs": "6.7.0",
"raw-body": "2.4.0", "raw-body": "2.4.0",
"type-is": "~1.6.17" "type-is": "~1.6.17"
},
"dependencies": {
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
"integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=",
"dev": true
}
} }
}, },
"bonjour": { "bonjour": {
...@@ -4707,6 +4747,14 @@ ...@@ -4707,6 +4747,14 @@
"type-is": "~1.6.18", "type-is": "~1.6.18",
"utils-merge": "1.0.1", "utils-merge": "1.0.1",
"vary": "~1.1.2" "vary": "~1.1.2"
},
"dependencies": {
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
"integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=",
"dev": true
}
} }
}, },
"ext": { "ext": {
...@@ -7656,8 +7704,7 @@ ...@@ -7656,8 +7704,7 @@
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz", "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"dev": true
}, },
"multicast-dns": { "multicast-dns": {
"version": "6.2.3", "version": "6.2.3",
...@@ -8025,6 +8072,11 @@ ...@@ -8025,6 +8072,11 @@
"integrity": "sha1-Cb6jND1BhZ69RGKS0RydTbYZCE4=", "integrity": "sha1-Cb6jND1BhZ69RGKS0RydTbYZCE4=",
"dev": true "dev": true
}, },
"odometer": {
"version": "0.4.8",
"resolved": "https://registry.npm.taobao.org/odometer/download/odometer-0.4.8.tgz",
"integrity": "sha1-L2cDv0xrOEwngjbQTUvIFxq+Q3Q="
},
"on-finished": { "on-finished": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz", "resolved": "https://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz",
...@@ -10970,10 +11022,9 @@ ...@@ -10970,10 +11022,9 @@
"dev": true "dev": true
}, },
"qs": { "qs": {
"version": "6.7.0", "version": "6.9.1",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz", "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.1.tgz",
"integrity": "sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=", "integrity": "sha1-IAgsZct4IjY1qxqerKiHWim/jsk="
"dev": true
}, },
"query-string": { "query-string": {
"version": "4.3.4", "version": "4.3.4",
...@@ -13262,6 +13313,21 @@ ...@@ -13262,6 +13313,21 @@
} }
} }
}, },
"vue-odometer": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/vue-odometer/download/vue-odometer-1.0.2.tgz",
"integrity": "sha1-zNQ8Sm7a4sQylZ6kvWPs4s/gGjQ=",
"requires": {
"lodash": "^4.17.15"
},
"dependencies": {
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz",
"integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg="
}
}
},
"vue-router": { "vue-router": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz", "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz",
......
package.json
View file @ 690c0b6b
...@@ -14,12 +14,16 @@ ...@@ -14,12 +14,16 @@
"build:win": "node build/build.js && electron-packager ./dist dashboard --platform=win32 --electron-version=6.1.0 --overwrite" "build:win": "node build/build.js && electron-packager ./dist dashboard --platform=win32 --electron-version=6.1.0 --overwrite"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"countup.js": "^2.0.4", "countup.js": "^2.0.4",
"echarts": "^4.4.0", "echarts": "^4.4.0",
"odometer": "^0.4.8",
"qs": "^6.9.1",
"view-design": "^4.0.2", "view-design": "^4.0.2",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-countup-v2": "^4.0.0", "vue-countup-v2": "^4.0.0",
"vue-odometer": "^1.0.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
......
src/App.vue
View file @ 690c0b6b
...@@ -19,6 +19,9 @@ export default { ...@@ -19,6 +19,9 @@ export default {
@font-face @font-face
font-family Microsoft YaHei UI font-family Microsoft YaHei UI
src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf) src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf)
@font-face
font-family Pangmenzhengdao
src url(./assets/font/pangmenzhengdao.ttf)
html, body html, body
background #000 background #000
width 100% width 100%
......
src/assets/css/variables.styl
View file @ 690c0b6b
$font-yahei = Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
$font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
$font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3)
rgba(91, 213, 255, opacity)
$fontColor = #2c3e50 $fontColor = #2c3e50
$edgeColor = #2ee4f5 $edgeColor = #2ee4f5
$cardBg = rgba(19, 78, 115, 0.4) $cardBg = rgba(19, 78, 115, 0.4)
......
src/components/MonitorCard/monitor-card.vue
View file @ 690c0b6b
<template> <template>
<div class="card-wrapper"> <div class="monitor-card">
<div v-if="mode == 1" class="card-wrapper">
<div class="card-title"> <div class="card-title">
<span class="s"/> <span class="s"/>
<span class="m"/> <span class="m"/>
...@@ -15,6 +16,15 @@ ...@@ -15,6 +16,15 @@
<div class="edge shadow right"/> <div class="edge shadow right"/>
<slot /> <slot />
</div> </div>
<div v-else-if="mode == 2" class="map-card-wrapper">
<div class="card-title">{{title}}</div>
<div class="card-content">
<div class="edge left-bottom"/>
<div class="edge right-bottom"/>
<slot />
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -25,21 +35,30 @@ export default { ...@@ -25,21 +35,30 @@ export default {
type: String, type: String,
default: '标题', default: '标题',
}, },
mode: {
type: [String, Number],
default: '1',
}
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$edgeWidth = 0 $edgeWidth = 0
$size()
height 100%
width 100%
.monitor-card
$size()
.card-wrapper .card-wrapper
$size()
background $cardBg background $cardBg
// border $cardBorder // border $cardBorder
box-shadow inset 0 0 0.8rem rgba(100,200,255,0.5) box-shadow inset 0 0 0.8rem rgba(100,200,255,0.5)
width 100%
height 100%
padding 0.5rem 1rem padding 0.5rem 1rem
position relative position relative
.card-title >.card-title
display flex display flex
align-items center align-items center
color $cardFontColor color $cardFontColor
...@@ -60,7 +79,7 @@ $edgeWidth = 0 ...@@ -60,7 +79,7 @@ $edgeWidth = 0
&.m &.m
width 0.3rem width 0.3rem
height 1.2rem height 1.2rem
.edge >.edge
position absolute position absolute
width 1rem width 1rem
height 1rem height 1rem
...@@ -99,4 +118,30 @@ $edgeWidth = 0 ...@@ -99,4 +118,30 @@ $edgeWidth = 0
&.right &.right
right 0 right 0
box-shadow -1px 0px 6px 1px $edgeColor box-shadow -1px 0px 6px 1px $edgeColor
.map-card-wrapper
$size()
.card-title
color #fff
font-size 1.4rem
font-family $font-pang
.card-content
background $color-map(0.15)
border-top 0.12rem solid $edgeColor
height calc(100% - 1.4rem)
position relative
>.edge
position absolute
width 1rem
height 1rem
border: 0.12rem solid $edgeColor
&.left-bottom
border-right-color transparent
border-top-color transparent
bottom $edgeWidth
left $edgeWidth
&.right-bottom
border-left-color transparent
border-top-color transparent
bottom $edgeWidth
right $edgeWidth
</style> </style>
src/components/MonitorCount/monitor-count.vue
View file @ 690c0b6b
...@@ -29,6 +29,7 @@ export default { ...@@ -29,6 +29,7 @@ export default {
return { return {
useEasing: true, useEasing: true,
useGrouping: true, useGrouping: true,
decimalPlaces: 2,
separator: ',', separator: ',',
decimal: '.', decimal: '.',
prefix: '', prefix: '',
......
src/components/MonitorFlip/index.js 0 → 100644
View file @ 690c0b6b
import MonitorFlip from './monitor-flip.vue'
export default (Vue) => {
Vue.component('m-flip', MonitorFlip)
}
src/components/MonitorFlip/monitor-flip.vue 0 → 100644
View file @ 690c0b6b
<template>
<IOdometer
class="monitor-flip"
:value="num"
/>
</template>
<script>
import IOdometer from 'vue-odometer'
export default {
name: 'MonitorFlip',
components: {
IOdometer,
},
props: {
value: {
type: Number,
default: 0,
},
},
data() {
return {
num: 0,
}
},
mounted() {
this.$nextTick(() => {
this.num = this.value
})
},
}
</script>
<style lang="stylus" scoped>
.monitor-flip
font-family $font-din
</style>
<style lang="stylus">
@import 'odometer/themes/odometer-theme-default.css'
.monitor-flip
.odometer-digit
background linear-gradient($color-map() 47%, transparent 50%, $color-map() 53%)
margin-right 0.4rem
padding 0 0.4rem
</style>
src/components/MonitorProgress/monitor-progress.vue
View file @ 690c0b6b
...@@ -42,10 +42,10 @@ export default { ...@@ -42,10 +42,10 @@ export default {
padding: `${(size / 5).toFixed(1)}rem ${(size / 4.5).toFixed(1)}rem`, padding: `${(size / 5).toFixed(1)}rem ${(size / 4.5).toFixed(1)}rem`,
} }
if (!this.hideInfo && !this.textInside) { if (!this.hideInfo && !this.textInside) {
result.width = '90%' result.width = '85%'
} else { } else {
if (this.percent >= 95) { if (this.percent >= 95) {
result.width = '90%' result.width = '85%'
} else { } else {
result.width = '100%' result.width = '100%'
} }
......
src/main.js
View file @ 690c0b6b
...@@ -6,16 +6,22 @@ import App from './App' ...@@ -6,16 +6,22 @@ import App from './App'
import router from './router' import router from './router'
import echarts from 'echarts' import echarts from 'echarts'
import {Button, Divider} from 'view-design' import {Button, Divider} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import MonitorCard from '@/components/MonitorCard' import MonitorCard from '@/components/MonitorCard'
import MonitorCount from '@/components/MonitorCount' import MonitorCount from '@/components/MonitorCount'
import MonitorFlip from '@/components/MonitorFlip'
import MonitorBrief from '@/components/MonitorBrief' import MonitorBrief from '@/components/MonitorBrief'
import MonitorProgress from '@/components/MonitorProgress' import MonitorProgress from '@/components/MonitorProgress'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.prototype.$ajax = ajax
Vue.prototype.$api = api
Vue.use(MonitorCard) Vue.use(MonitorCard)
Vue.use(MonitorCount) Vue.use(MonitorCount)
Vue.use(MonitorFlip)
Vue.use(MonitorBrief) Vue.use(MonitorBrief)
Vue.use(MonitorProgress) Vue.use(MonitorProgress)
Vue.component('Button', Button) Vue.component('Button', Button)
......
src/router/index.js
View file @ 690c0b6b
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Main from '@/views/main' import Main from '@/views/main'
import ChinaMap from '@/views/china'
import Guangdong from '@/views/guangdong/guangdong'
import MapTest from '@/views/map-test'
import Map3D from '@/views/3d-map'
Vue.use(Router) Vue.use(Router)
...@@ -10,6 +14,26 @@ export default new Router({ ...@@ -10,6 +14,26 @@ export default new Router({
path: '/', path: '/',
name: 'main', name: 'main',
component: Main component: Main
} },
{
path: '/map',
name: 'map',
component: ChinaMap
},
{
path: '/guangdong',
name: 'guangdong',
component: Guangdong
},
{
path: '/map2',
name: 'map2',
component: MapTest
},
{
path: '/map3d',
name: 'map3d',
component: Map3D
},
] ]
}) })
src/server/ajax.js 0 → 100644
View file @ 690c0b6b
import axios from 'axios'
import qs from 'qs'
import api from './api'
const Axios = axios.create({
baseURL: api.BASE_URL,
timeout: 50000,
})
Axios.interceptors.request.use(config => {
// 启动loading，添加token
// config.headers.Authorization = token
return config
}, error => {
return Promise.reject(error)
})
Axios.interceptors.response.use(response => {
// TODO 返回的数据status判断错误操作等……
return response.data
}, error => {
return Promise.resolve(error.response)
})
export default {
post(url, data) {
return Axios({
method: 'POST',
url,
data: qs.stringify(data),
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
}
}).then(res => res)
},
get(url, params) {
return Axios({
method: 'GET',
url,
params, // get 请求时带的参数
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json;charset=UTF-8',
}
}).then(res => res)
}
}
src/server/api.js 0 → 100644
View file @ 690c0b6b
let IMG_URL = ''
let FILE_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
IMG_URL = 'http://10.221.1.181:8080/dist/static/'
FILE_URL = '/dist/static/'
break
default:
IMG_URL = 'http://localhost:8080/static/'
FILE_URL = '/static/'
};
export default {
BASE_URL: 'http://sunmonster.vicp.cc:41318/pudong/',
IMG_URL,
FILE_URL,
GET_SMART_INFO: '/api/discoverInfo',
GET_SMART_DETAIL: '/api/discoverDetail',
GET_TS_LIST: '/api/findUnCaseTsList',
GET_BX_LIST: '/api/findUnCaseBxList',
GET_COMPANY_CYCLE: '/api/findCycle',
GET_CREDIT_HIGH: '/api/findCreditHigh',
GET_CREDIT_MIDDLE: '/api/findCreditMiddle',
GET_CREDIT_LOW: '/api/findCreditLow',
}
src/views/3d-map.vue 0 → 100644
View file @ 690c0b6b
<template>
<div id="container"/>
</template>
<script>
const {AMap} = window
export default {
name: 'Map3D',
data() {
return {
map: null,
buildingOptions: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[
{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ff99ff00',//楼顶颜色
color2: 'ff999900',//楼面颜色
path: [
[121.498447,31.217582],
[121.498466,31.218851],
[121.497402,31.218943],
[121.497423,31.217595],
]
},
{
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffcc0000',//楼顶颜色
color2: 'ffaa0000',//楼面颜色
path: [
[121.497898,31.217932],
[121.498456,31.217945],
[121.498445,31.218445],
[121.49791,31.218376],
]
},
{
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
path: [
[121.498696,31.218295],
[121.498679,31.217744],
[121.499197,31.217747],
[121.499243,31.218324],
]
},
]
},
}
},
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap() {
const buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]})
buildingLayer.setStyle(this.buildingOptions)
this.map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
showLabel: false,
zoom: 17,
pitch:50,
rotation:45,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[17,20],
center:[121.497915,31.218138],
showIndoorMap:false,
// mapStyle:'amap://styles/light',
features:['bg','point','road'],
layers:[
new AMap.TileLayer({}),
buildingLayer
]
})
this.map.on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.map.setZoomAndCenter(18.8, location)
console.log(e, e.lnglat.getLng() + ',' + e.lnglat.getLat())
this.showDetail(e, location)
})
this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
new AMap.Polygon({
bubble:true,
fillColor: 'green',
fillOpacity:0.2,
strokeWeight:1,
path:this.buildingOptions.areas[0].path,
map:this.map
})
// new AMap.Polygon({
// bubble:true,
// fillOpacity:0.2,
// strokeWeight:1,
// path:this.buildingOptions.areas[1].path,
// map:this.map
// })
},
showDetail(e, location) {
// TODO
const infoWindow = new AMap.InfoWindow({
content: `
<div>
<b>测试建筑物</b>
<p>电话 : 021-1234567 邮编 : 200000</p>
</div>
`
})
infoWindow.open(this.map, location)
},
},
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
resize both
</style>
<style lang="stylus">
.amap-logo
.amap-copyright
display none !important
</style>
src/views/china-bak.vue 0 → 100644
View file @ 690c0b6b
<template>
<div id="map"/>
</template>
<script>
import china from 'echarts/map/json/china.json'
export default {
name: 'ChinaMap',
mounted() {
this.$nextTick(() => {
var mapName = 'china'
this.$echarts.registerMap('china',china)
var data = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 47 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 82 },
{ name: '黑龙江', value: 66 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 92 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '山东', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 125 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
var geoCoordMap = {}
var toolTipData = [
{
name: '北京',
value: [{ name: '文科', value: 95 }, { name: '理科', value: 82 }]
},
{
name: '天津',
value: [{ name: '文科', value: 22 }, { name: '理科', value: 20 }]
},
{
name: '河北',
value: [{ name: '文科', value: 60 }, { name: '理科', value: 42 }]
},
{
name: '山西',
value: [{ name: '文科', value: 40 }, { name: '理科', value: 41 }]
},
{
name: '内蒙古',
value: [{ name: '文科', value: 23 }, { name: '理科', value: 24 }]
},
{
name: '辽宁',
value: [{ name: '文科', value: 39 }, { name: '理科', value: 28 }]
},
{
name: '吉林',
value: [{ name: '文科', value: 41 }, { name: '理科', value: 41 }]
},
{
name: '黑龙江',
value: [{ name: '文科', value: 35 }, { name: '理科', value: 31 }]
},
{
name: '上海',
value: [{ name: '文科', value: 12 }, { name: '理科', value: 12 }]
},
{
name: '江苏',
value: [{ name: '文科', value: 47 }, { name: '理科', value: 45 }]
},
{
name: '浙江',
value: [{ name: '文科', value: 57 }, { name: '理科', value: 57 }]
},
{
name: '安徽',
value: [{ name: '文科', value: 57 }, { name: '理科', value: 52 }]
},
{
name: '福建',
value: [{ name: '文科', value: 59 }, { name: '理科', value: 57 }]
},
{
name: '江西',
value: [{ name: '文科', value: 49 }, { name: '理科', value: 42 }]
},
{
name: '山东',
value: [{ name: '文科', value: 67 }, { name: '理科', value: 52 }]
},
{
name: '河南',
value: [{ name: '文科', value: 69 }, { name: '理科', value: 68 }]
},
{
name: '湖北',
value: [{ name: '文科', value: 60 }, { name: '理科', value: 56 }]
},
{
name: '湖南',
value: [{ name: '文科', value: 62 }, { name: '理科', value: 52 }]
},
{
name: '重庆',
value: [{ name: '文科', value: 47 }, { name: '理科', value: 44 }]
},
{
name: '四川',
value: [{ name: '文科', value: 65 }, { name: '理科', value: 60 }]
},
{
name: '贵州',
value: [{ name: '文科', value: 32 }, { name: '理科', value: 30 }]
},
{
name: '云南',
value: [{ name: '文科', value: 42 }, { name: '理科', value: 41 }]
},
{
name: '西藏',
value: [{ name: '文科', value: 5 }, { name: '理科', value: 4 }]
},
{
name: '陕西',
value: [{ name: '文科', value: 38 }, { name: '理科', value: 42 }]
},
{
name: '甘肃',
value: [{ name: '文科', value: 28 }, { name: '理科', value: 28 }]
},
{
name: '青海',
value: [{ name: '文科', value: 5 }, { name: '理科', value: 5 }]
},
{
name: '宁夏',
value: [{ name: '文科', value: 10 }, { name: '理科', value: 8 }]
},
{
name: '新疆',
value: [{ name: '文科', value: 36 }, { name: '理科', value: 31 }]
},
{
name: '广东',
value: [{ name: '文科', value: 63 }, { name: '理科', value: 60 }]
},
{
name: '广西',
value: [{ name: '文科', value: 29 }, { name: '理科', value: 30 }]
},
{
name: '海南',
value: [{ name: '文科', value: 8 }, { name: '理科', value: 6 }]
}
]
/*获取地图数据*/
let myChart = this.$echarts.init(document.getElementById('map'))
// myChart.showLoading();
var mapFeatures = this.$echarts.getMap(mapName).geoJson.features
// myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})
console.log(data)
console.log(toolTipData)
var max = 480,
min = 9 // todo
var maxSize4Pin = 100,
minSize4Pin = 20
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 option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof params.value[2] == 'undefined') {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':<br>'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
':' +
toolTipData[i].value[j].value +
'<br>'
}
}
}
console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml
} else {
var toolTiphtml = ''
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ':<br>'
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
':' +
toolTipData[i].value[j].value +
'<br>'
}
}
}
console.log(toolTiphtml)
// console.log(convertData(data))
return toolTiphtml
}
}
},
// legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: ['credit_pm2.5'],
// textStyle: {
// color: '#fff'
// }
// },
visualMap: {
show: true,
min: 0,
max: 200,
left: 400,
bottom: 200,
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
/*工具按钮组*/
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// dataView: {
// readOnly: false
// },
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min)
var b = minSize4Pin - a * min
b = maxSize4Pin - a * max
return a * val[2] + b
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
}
}
},
itemStyle: {
normal: {
color: '#F62157' //标志颜色
}
},
zlevel: 6,
data: convertData(data)
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
data
.sort(function(a, b) {
return b.value - a.value
})
.slice(0, 5)
),
symbolSize: function(val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
}
]
}
myChart.setOption(option)
})
}
}
</script>
<style lang="stylus">
#map
width 100%
height 100%
</style>
src/views/china.vue 0 → 100644
View file @ 690c0b6b
<template>
<div id="map" :style="`background-image: url(${require('@/assets/images/bg.jpg')})`"/>
</template>
<script>
import china from 'echarts/map/json/china.json'
export default {
name: 'ChinaMap',
mounted() {
this.$nextTick(() => {
var mapName = 'china'
this.$echarts.registerMap('china',china)
var data = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 47 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 82 },
{ name: '黑龙江', value: 66 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 92 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '山东', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 125 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
var geoCoordMap = {}
/*获取地图数据*/
let myChart = this.$echarts.init(document.getElementById('map'))
// myChart.showLoading();
var mapFeatures = this.$echarts.getMap(mapName).geoJson.features
// myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})
var max = 480,
min = 9 // todo
var maxSize4Pin = 100,
minSize4Pin = 20
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 option = {
// legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: ['credit_pm2.5'],
// textStyle: {
// color: '#fff'
// }
// },
// visualMap: {
// show: true,
// min: 0,
// max: 200,
// left: 400,
// bottom: 200,
// text: ['高', '低'], // 文本，默认为数值文本
// calculable: true,
// seriesIndex: [1],
// inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// // color: ['#ffc0cb', '#800080'] // 红紫
// // color: ['#3C3B3F', '#605C3C'] // 黑绿
// // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// // color: ['#23074d', '#cc5333'] // 紫红
// // color: ['#00467F', '#A5CC82'] // 蓝绿
// // color: ['#1488CC', '#2B32B2'] // 浅蓝
// // color: ['#00467F', '#A5CC82'] // 蓝绿
// // color: ['#00467F', '#A5CC82'] // 蓝绿
// // color: ['#00467F', '#A5CC82'] // 蓝绿
// // color: ['#00467F', '#A5CC82'] // 蓝绿
// }
// },
/*工具按钮组*/
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// dataView: {
// readOnly: false
// },
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [
// {
// name: '散点',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: convertData(data),
// symbolSize: function(val) {
// return val[2] / 10
// },
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: '#05C3F9'
// }
// }
// },
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min)
var b = minSize4Pin - a * min
b = maxSize4Pin - a * max
return a * val[2] + b
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
}
}
},
itemStyle: {
normal: {
color: '#F62157' //标志颜色
}
},
zlevel: 6,
data: convertData(data)
},
// {
// name: 'Top 5',
// type: 'effectScatter',
// coordinateSystem: 'geo',
// data: convertData(
// data
// .sort(function(a, b) {
// return b.value - a.value
// })
// .slice(0, 5)
// ),
// symbolSize: function(val) {
// return val[2] / 10
// },
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: 'yellow',
// shadowBlur: 10,
// shadowColor: 'yellow'
// }
// },
// zlevel: 1
// }
]
}
myChart.setOption(option)
})
}
}
</script>
<style lang="stylus" scoped>
#map
width 100%
height 100%
background-size cover
</style>
src/views/guangdong/guangdong.vue 0 → 100644
View file @ 690c0b6b
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars.png')})`">
<div id="map" />
<div class="area">
<p>当前广东省养殖面积</p>
<b><m-flip :value="888888888"/></b>
<span>k㎡</span>
</div>
<div class="box1">
<m-card mode="2" title="各品种企业排行榜">
<DataList :list="list1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="各市养殖面积"></m-card>
</div>
<div class="box3">
<m-card mode="2" title="各品种养殖/出塘数据"></m-card>
</div>
</div>
</template>
<script>
import guangdong from 'echarts/map/json/province/guangdong.json'
import DataList from './list'
export default {
name: 'Guangdong',
components: {
DataList,
},
data() {
return {
testData: [
{name: 'test', value: [114.280637, 24.125178]},
{name: 'test', value: [113.280637, 23.125178]},
{name: 'test', value: [112.280637, 22.125178]},
{name: 'test', value: [111.180637, 22.125178]},
{name: 'test', value: [112.280637, 24.125178]},
{name: 'test', value: [115.280637, 23.125178]},
{name: 'test', value: [115.980637, 23.125178]},
{name: 'test', value: [114.780637, 24.125178]},
],
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
{name: '投放鱼种', value: 193027, unit: '吨'},
{name: '稚鳖', value: 6549, unit: '万只'},
{name: '稚龟', value: 655, unit: '万只'},
{name: '鳗苗捕捞', value: 43, unit: '千克'},
{name: '海水鱼苗', value: 508510, unit: '万尾'},
{name: '虾类育苗', value: 5455, unit: '万尾'},
{name: '贝类育苗', value: 293678, unit: '万尾'},
{name: '海带', value: 100, unit: '亿株'},
{name: '紫菜', value: 0.06, unit: '亿株'},
{name: '海参', value: 0.09, unit: '亿头'},
],
}
},
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap() {
const mapName = 'guangdong'
// 调整label坐标位置
guangdong.features.forEach(el => {
switch (el.properties.name) {
case '河源市':
el.properties.cp = [114.897802, 23.946266]
break
case '清远市':
el.properties.cp = [113.051227, 24.185022]
break
case '肇庆市':
el.properties.cp = [112.172529, 23.451546]
break
case '云浮市':
el.properties.cp = [111.844439, 22.829801]
break
case '湛江市':
el.properties.cp = [110.164977, 21.274898]
break
case '茂名市':
el.properties.cp = [110.919229, 21.859751]
break
case '阳江市':
el.properties.cp = [111.775107, 21.959222]
break
case '广州市':
el.properties.cp = [113.580637, 23.325178]
break
case '江门市':
el.properties.cp = [112.694942, 22.190431]
break
case '揭阳市':
el.properties.cp = [116.055733, 23.243778]
break
case '潮州市':
el.properties.cp = [116.832301, 23.761701]
break
case '汕尾市':
el.properties.cp = [115.564238, 22.974485]
break
case '东莞市':
el.properties.cp = [113.846262, 22.946237]
break
default:
break
}
})
this.$echarts.registerMap(mapName, guangdong)
const map = this.$echarts.init(document.getElementById('map'))
const config = {
geo: {
map: mapName,
top: 120,
label: {
normal: {
show: true,
color: '#fff',
fontSize: 10,
},
emphasis: {
show: true,
color: '#fff',
}
},
itemStyle: {
normal: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.6)',
borderWidth: 0.4,
},
emphasis: {
areaColor: '#5ad4ff',
color: '#fff'
}
},
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.testData,
symbolSize: 10,
label: {
normal: {
show: false
},
emphasis: {
show: true,
formatter: '{b}',
position: 'right',
}
},
itemStyle: {
normal: {
color: '#5BD5FF',
shadowColor: '#5BD5FF',
shadowBlur: 2
}
}
},
],
}
map.setOption(config)
},
}
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-template-areas \
'box1 . box2'\
'box1 . box2'\
'box3 box3 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 3fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
#map
width 100%
height 100%
position absolute
top 0
left 0
// transform rotate(25deg)
.area
font-size 1.8rem
color $color-map(1)
position absolute
top 10%
left 0
right 0
text-align center
p
color #fff
font-family $font-pang
b
font-size 3rem
>span
font-size 1.5rem
</style>
src/views/guangdong/list.vue 0 → 100644
View file @ 690c0b6b
<template>
<ul class="list">
<li class="row" v-for="(item, i) in list" :key="item.name + i">
<p>{{item.name}}</p>
<p>
<b><m-count :value="item.value"/></b>
<span>{{item.unit}}</span>
</p>
</li>
</ul>
</template>
<script>
export default {
name: 'DataList',
props: {
list: {
type: Array,
default() {
return []
}
}
}
}
</script>
<style lang="stylus" scoped>
.list
height 100%
overflow hidden
padding 0.5rem 1rem
.row
display flex
color $color-map(1)
padding 0.5rem 0
align-items center
justify-content space-between
border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
</style>
src/views/header.vue
View file @ 690c0b6b
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
b b
font-size 1.8rem font-size 1.8rem
.divider .divider
margin 0 3rem margin 0 2.4rem
background $edgeColor background $edgeColor
opacity 0.5 opacity 0.5
</style> </style>
src/views/map-test.vue 0 → 100644
View file @ 690c0b6b
<template>
<div id="map" :style="`background-image: url(${require('@/assets/images/stars.png')})`"/>
</template>
<script>
import china from 'echarts/map/js/china'
import sichuan from 'echarts/map/js/province/sichuan'
import anhui from 'echarts/map/js/province/anhui'
//定义全国省份的数组
let provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
let provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
export default {
name: 'MapTest',
mounted() {
this.$nextTick(() => {
const data = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 299 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 29 },
{ name: '福建', value: 316 },
{ name: '江西', value: 91 },
{ name: '山东', value: 19 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 26 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 25 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 256 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
// 初始化echarts
let map = this.$echarts.init(document.getElementById('map'))
// console.log(map)
// 定义初始加载的地图区域,中国地图
let selected = 'china'
var geoCoordMap = {}
var max = 480,
min = 9 // todo
var maxSize4Pin = 100,
minSize4Pin = 20
var mapFeatures = this.$echarts.getMap(selected).geoJson.features
// myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})
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
}
const config = {
visualMap: {
show: false,
min: 0,
max: 200,
calculable: true,
inRange: {
opacity: 0.3,
color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.2)', 'rgba(91, 213, 255, 0.3)', 'rgba(91, 213, 255, 0.4)', 'rgba(91, 213, 255, 0.5)']
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
}
// 定义加载地图的方法
// 参数为要显示地图区域的名字
let loadMap = (param) => {
config.geo = {
// map: 'china' | '四川'
// 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
map: param,
// regions: [{
// name: '江苏',
// selected: true,
// itemStyle: {
// areaColor: '#5ad4ff',
// color: 'red',
// shadowColor: 'rgba(0, 0, 0, 1)',
// shadowBlur: 10,
// shadowOffsetY: 10,
// shadowOffsetX: -5,
// }
// }],
itemStyle: {
normal: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.6)',
borderWidth: 0.4,
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10,
// shadowOffsetY: 10,
// shadowOffsetX: 10,
},
emphasis: {
areaColor: '#5ad4ff',
color: '#fff'
}
}
},
config.series = [
{
type: 'map',
map: param,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
roam: true,
animation: false,
data: data
},
]
map.setOption(config)
}
// 第一次加载地图
loadMap(selected)
// 判断当前要加载的地图是不是省？
let isProvince = (name) => {
return provincesText.some((province) => {
return province === name
})
}
// 定义方法加载某个省的地图文件
let loadScriptMap = (name, callback) => {
// 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
let pinyinName = provinces[provincesText.indexOf(name)]
console.log(pinyinName)
// 引入这个对应的地图JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
let currentMap = require(`echarts/map/js/province/${pinyinName}`)
callback(name)
}
// 监听地图点击事件
map.on('click', (ev) => {
console.log(ev)
ev.selected = true
config.geo.regions = [{
name: ev.data.name,
selected: true,
itemStyle: {
areaColor: '#5ad4ff',
color: 'red',
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
shadowOffsetY: 10,
shadowOffsetX: -5,
}
}]
config.series[1] = {
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min)
var b = minSize4Pin - a * min
b = maxSize4Pin - a * max
return a * val[2] + b
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
}
}
},
itemStyle: {
normal: {
color: '#F62157' //标志颜色
}
},
zlevel: 106,
data: convertData([ev.data])
}
map.setOption(config)
// // 如果点击的是一个省，那就切换到这个省的地图
// if (isProvince(ev.name)) {
// selected = ev.name
// console.log(selected)
// // 从外部加载这个省的地图文件
// loadScriptMap(ev.name, loadMap)
// } else {
// // 否则切换中国地图
// selected = 'china'
// loadMap(selected)
// }
})
})
},
}
</script>
<style lang="stylus" scoped>
#map
width 100%
height 100%
background-size cover
background-position center
background-color #061627
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment