|
|
@ -8,6 +8,7 @@
|
|
|
|
import Chart from "../../../components/Charts/Chart";
|
|
|
|
import Chart from "../../../components/Charts/Chart";
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
import ChinaMapData from '@/utils/ChinaMapData.json'
|
|
|
|
import ChinaMapData from '@/utils/ChinaMapData.json'
|
|
|
|
|
|
|
|
import gsByMap from '@/utils/map/gs_by.json'
|
|
|
|
import axios from "axios";
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
@ -31,7 +32,7 @@ export default {
|
|
|
|
const random = (val = 1) => {
|
|
|
|
const random = (val = 1) => {
|
|
|
|
return Math.ceil(Math.random() * val)
|
|
|
|
return Math.ceil(Math.random() * val)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let Point = [
|
|
|
|
let Point = [
|
|
|
|
{value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
|
|
|
|
{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: [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: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
|
|
|
@ -42,6 +43,7 @@ export default {
|
|
|
|
{value: [113.0823, 28.2568], 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)},
|
|
|
|
{value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
|
|
|
|
]
|
|
|
|
]
|
|
|
|
|
|
|
|
Point = []
|
|
|
|
let option = {
|
|
|
|
let option = {
|
|
|
|
grid: {
|
|
|
|
grid: {
|
|
|
|
top: '0%',
|
|
|
|
top: '0%',
|
|
|
@ -57,7 +59,7 @@ export default {
|
|
|
|
label: {
|
|
|
|
label: {
|
|
|
|
show: true
|
|
|
|
show: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
roam: false,
|
|
|
|
roam: true,
|
|
|
|
layoutCenter: ["50%", "50%"], // position位置
|
|
|
|
layoutCenter: ["50%", "50%"], // position位置
|
|
|
|
layoutSize: 25 * vw,
|
|
|
|
layoutSize: 25 * vw,
|
|
|
|
itemStyle: {
|
|
|
|
itemStyle: {
|
|
|
@ -96,7 +98,7 @@ export default {
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
type: "map",
|
|
|
|
type: "map",
|
|
|
|
roam: false,
|
|
|
|
roam: 'scale',
|
|
|
|
label: {
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
normal: {
|
|
|
|
show: true,
|
|
|
|
show: true,
|
|
|
@ -186,11 +188,16 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
chartClick() {
|
|
|
|
chartClick() {
|
|
|
|
this.$refs.chart.chart.on('click', async (params) => {
|
|
|
|
this.$refs.chart.chart.on('click', async (params) => {
|
|
|
|
this.code = this.cityJson[params.dataIndex].properties.adcode
|
|
|
|
this.code = this.cityJson[params.dataIndex].properties.adcode || this.code || gsByMap.features[params.dataIndex].properties.unique_id
|
|
|
|
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
|
|
|
|
let mapData
|
|
|
|
|
|
|
|
if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
|
|
|
|
|
|
|
|
mapData = {features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
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.getMap(mapData)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.$refs.chart.$el.addEventListener('dblclick', ()=> {
|
|
|
|
this.$refs.chart.$el.addEventListener('dblclick', () => {
|
|
|
|
this.chartDblClick(this.code)
|
|
|
|
this.chartDblClick(this.code)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -198,15 +205,23 @@ export default {
|
|
|
|
let a = val.toString().substr(0, 2)
|
|
|
|
let a = val.toString().substr(0, 2)
|
|
|
|
let b = val.toString().substr(2, 2)
|
|
|
|
let b = val.toString().substr(2, 2)
|
|
|
|
let c = val.toString().substr(4, 2)
|
|
|
|
let c = val.toString().substr(4, 2)
|
|
|
|
if (c !== '00') {
|
|
|
|
let d = val.toString().substr(6, 9)
|
|
|
|
// this.code = Number(a + b + '00')
|
|
|
|
d = null
|
|
|
|
this.code = Number(a + '0000')
|
|
|
|
if (d && d !== '000') {
|
|
|
|
|
|
|
|
this.code = Number(a + b + c)
|
|
|
|
|
|
|
|
} else if (c !== '00') {
|
|
|
|
|
|
|
|
this.code = Number(a + b + '00')
|
|
|
|
} else if (b !== '00') {
|
|
|
|
} else if (b !== '00') {
|
|
|
|
this.code = Number(a + '0000')
|
|
|
|
this.code = Number(a + '0000')
|
|
|
|
} else if (a !== '10') {
|
|
|
|
} else if (a !== '10') {
|
|
|
|
this.code = 100000
|
|
|
|
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
|
|
|
|
let mapData
|
|
|
|
|
|
|
|
if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
|
|
|
|
|
|
|
|
mapData = gsByMap
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
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.getMap(mapData)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|