修改地图
夜笙歌
6 months ago
parent
25054ef36d
commit
e239834c9e
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view> </router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {AppMain} from './components'
|
||||||
|
import BoardTopNav from "@/components/BoardTopNav";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BoardIndex',
|
||||||
|
components: {
|
||||||
|
AppMain,
|
||||||
|
BoardTopNav
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<Chart ref="chart" class="chart"></Chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from "../../../components/Charts/Chart";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import ChinaMapData from '@/utils/ChinaMapData.json'
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||||
|
export default {
|
||||||
|
components: {Chart},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: 100000,
|
||||||
|
cityJson: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
let mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
|
||||||
|
this.getMap(mapData)
|
||||||
|
this.chartClick()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getMap(geoJson) {
|
||||||
|
this.cityJson = geoJson.features
|
||||||
|
echarts.registerMap('map', geoJson);
|
||||||
|
const random = (val = 1) => {
|
||||||
|
return Math.ceil(Math.random() * val)
|
||||||
|
}
|
||||||
|
let Point = [
|
||||||
|
{value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [104.065735, 30.659462], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
|
||||||
|
{value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
|
||||||
|
]
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: '0%',
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '0%',
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: "map",
|
||||||
|
show: false,
|
||||||
|
aspectScale: 0.75, //长宽比
|
||||||
|
zoom: 1.1,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
roam: false,
|
||||||
|
layoutCenter: ["50%", "50%"], // position位置
|
||||||
|
layoutSize: 25 * vw,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: {
|
||||||
|
type: "radial",
|
||||||
|
x: 0.5,
|
||||||
|
y: 0.5,
|
||||||
|
r: 0.8,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#013B8F", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#013B8F", // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: true, // 缺省为 false
|
||||||
|
},
|
||||||
|
shadowColor: "#013B8F",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 8,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "#2AB8FF",
|
||||||
|
borderWidth: 0,
|
||||||
|
color: "green",
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "map",
|
||||||
|
roam: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#1DE9B6",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: "rgb(147, 235, 248,0.5)",
|
||||||
|
borderWidth: 1,
|
||||||
|
areaColor: {
|
||||||
|
type: "radial",
|
||||||
|
x: 0.5,
|
||||||
|
y: 0.5,
|
||||||
|
r: 0.8,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#013B8F", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#013B8F", // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: true, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
zoom: 1.1,
|
||||||
|
map: 'map', //使用
|
||||||
|
aspectScale: 0.75, //长宽比
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: "effectScatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
showEffectOn: 'emphasis',
|
||||||
|
zlevel: 1,
|
||||||
|
rippleEffect: {
|
||||||
|
period: 15,
|
||||||
|
scale: 1,
|
||||||
|
brushType: "fill",
|
||||||
|
},
|
||||||
|
hoverAnimation: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#1DE9B6",
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: "#333",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
symbolSize: [0.5 * vw, 0.5 * vw],
|
||||||
|
data: Point,
|
||||||
|
label: {
|
||||||
|
padding: [-16, 0, 0, 5],
|
||||||
|
show: true,
|
||||||
|
position: 'bottom',
|
||||||
|
formatter: function (val) {
|
||||||
|
return [`{a|}{b|'点位${val.data.index}}`]
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
width: 0.34 * vw,
|
||||||
|
height: 0.34 * vw,
|
||||||
|
borderColor: '#0FF32E',
|
||||||
|
borderWidth: 0.34 * vw,
|
||||||
|
borderRadius: 0.17 * vw,
|
||||||
|
shadowBlur: 20,
|
||||||
|
shadowColor: "#0FF32E",
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
padding: [0, 0, 0, 5],
|
||||||
|
color: '#0FF32E',
|
||||||
|
height: 40,
|
||||||
|
fontSize: 0.75 * vw,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.$refs.chart.setData(option);
|
||||||
|
},
|
||||||
|
chartClick() {
|
||||||
|
this.$refs.chart.chart.on('click', async (params) => {
|
||||||
|
this.code = this.cityJson[params.dataIndex].properties.adcode
|
||||||
|
let mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.cityJson[params.dataIndex].properties.adcode}_full.json`)).data
|
||||||
|
this.getMap(mapData)
|
||||||
|
})
|
||||||
|
this.$refs.chart.$el.addEventListener('dblclick', ()=> {
|
||||||
|
this.chartDblClick(this.code)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async chartDblClick(val) {
|
||||||
|
let a = val.toString().substr(0, 2)
|
||||||
|
let b = val.toString().substr(2, 2)
|
||||||
|
let c = val.toString().substr(4, 2)
|
||||||
|
if (c !== '00') {
|
||||||
|
// this.code = Number(a + b + '00')
|
||||||
|
this.code = Number(a + '0000')
|
||||||
|
} else if (b !== '00') {
|
||||||
|
this.code = Number(a + '0000')
|
||||||
|
} else if (a !== '10') {
|
||||||
|
this.code = 100000
|
||||||
|
}
|
||||||
|
let mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
|
||||||
|
this.getMap(mapData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue