地图
效果展示
标题
示例代码
Details
vue
<template>
<h4>标题</h4>
<div id="main" ref="demoRef" :style="{width: '100%', height: '500px'}" :key="updateKey"></div>
<div id="main1" ref="demo1Ref" :style="{width: '100%', height: '500px'}" :key="updateKey"></div>
<button class="button" @click="refresh()">刷新</button>
<button class="button" @click="init()">初始化</button>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts';
import * as _ from 'lodash-es';
export default {
data() {
return {
updateKey: 0,
allData: []
}
},
computed: {
},
mounted() {
this.getAllData()
},
methods: {
async getAllData(){
const response = await axios.get('https://qiniuyun.study.weilh.vip/jsons/echarts/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD.json')
this.allData = response.data
console.log(response.data);
this.createChart()
this.createChart1()
},
init() {
this.createChart()
this.createChart1()
},
refresh() {
// todo 生成随机数据...
this.createChart()
this.createChart1()
},
createChart() {
const el = this.$refs['demoRef']
const myChart = echarts.init(el);
// 注册地图，名字自己取：中国
echarts.registerMap('中国', this.allData)
const option = {
visualMap: {
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [{
type: 'map',
map: '中国',
label: {
show: true
},
roam: true, // 允许拖动和缩放
}]
}
myChart.setOption(option)
},
createChart1() {
var colors = ['red', 'blue', 'gray'];
var colors1 = ['#55ff00', '#ffff00', '#5500ff'];
const customSettings = [];
console.log(this.allData, 'allData')
this.allData.features.forEach(e => {
console.log(e, 'e');
var color = _.sample(colors);
customSettings.push({
name: e.properties.name,
itemStyle: {
areaColor: color,
color: _.sample(colors1)
}
})
})
const el = this.$refs['demo1Ref']
const myChart = echarts.init(el);
// 注册地图，名字自己取：中国
echarts.registerMap('中国', this.allData)
const option = {
visualMap: {
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
tooltip: {
show: true,
trigger: 'item', // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
alwaysShowContent: false,
backgroundColor: '#0C121C',
borderColor: 'rgba(0, 0, 0, 0.16);',
hideDelay: 100,
triggerOn: 'mousemove',
enterable: true,
textStyle: {
color: '#DADADA',
fontSize: '12',
width: 20,
height: 30,
overflow: 'break'
},
formatter(params) {
console.log(params, 'params')
return `数量：11111`
},
showDelay: 100
},
geo: {
map: '中国',
roam: true, //滚轮 放大缩小
zoom: 1.2, //缩放比例
regions: customSettings, //设置省市县的样式颜色
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)' //地图边框颜色
},
emphasis: {
areaColor: '#F3B329', //鼠标放到地图上显示的颜色（黄色）
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
}
myChart.setOption(option)
}
},
}
</script>
<style scoped>
#main {
/* width: 100%; */
border: 1px solid red;
}
.button {
margin: 10px;
padding: 10px 20px;
border-radius: 5px;
background-color: #10b981;
color: #fff;
}
</style>参考
地图源数据
- 下载数据
- 合并数据
左上角：
- Open ：上传已经下载的 json 文件，可以是多个 json 文件
- Save ：选择
GeoJSON格式下载，然后改为 json 文件即可
制作地图源数据示例代码
Details
py
import requests
import json
import os
save_path = './jsons'
if os.path.exists(save_path) == False:
os.makedirs(save_path)
def getData_district(code, name):
url = f'https://geo.datav.aliyun.com/areas_v3/bound/{code}_full.json'
headers = {'Content-Type': 'application/json'}
res = requests.get(url, headers=headers)
print(res.status_code)
if res.status_code != 200:
return []
# 追加写入内容到文件
filename = f"{save_path}/{code}-{name}.json"
with open(filename, "a", encoding="utf-8") as file:
file.write(res.text)
res = json.loads(res.text)
return res['features']
def getData_city(code, name):
url = f'https://geo.datav.aliyun.com/areas_v3/bound/{code}_full.json'
headers = {'Content-Type': 'application/json'}
res = requests.get(url, headers=headers)
print(res.status_code)
if res.status_code != 200:
return []
# 追加写入内容到文件
filename = f"{save_path}/{code}-{name}.json"
with open(filename, "a", encoding="utf-8") as file:
file.write(res.text)
res = json.loads(res.text)
return res['features']
def getData_province(code, name):
url = f'https://geo.datav.aliyun.com/areas_v3/bound/{code}_full.json'
headers = {'Content-Type': 'application/json'}
res = requests.get(url, headers=headers)
# 追加写入内容到文件
filename = f"{save_path}/{code}-{name}.json"
with open(filename, "a", encoding="utf-8") as file:
file.write(res.text)
res = json.loads(res.text)
all_data = {'type': 'FeatureCollection', 'features': []}
features_arr = []
for i in res['features']:
city_features = getData_city(i['properties']['adcode'], i['properties']['name'])
for j in city_features:
print(j['properties']['name'])
features_arr.append(j)
if j['properties']['name'] == '南宁市':
district_features = getData_district(j['properties']['adcode'], j['properties']['name'])
for m in district_features:
print(m['properties']['name'])
features_arr.append(m)
all_data['features'] = features_arr
filename = f"{save_path}/China.json"
with open(filename, "a", encoding="utf-8") as file:
file.write(json.dumps(all_data))
# 代码
code = '100000' # 全国
getData_province(code, '全国')