地图图表
2022-03-05 本文已影响0人
苍老师的眼泪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.js"></script>
<style>
#echart {
width: 100%;
height: 1080px;
border: thin solid gray;
}
</style>
</head>
<body>
<div id="echart"></div>
<button onclick="changeScatter()">改变坐标</button>
<script>
var airData = [
{ name: '北京', value: 39.92 },
{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },
{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },
{ name: '河南', value: 113 },
{ name: '云南', value: 25.04 },
{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },
{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },
{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },
{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },
{ name: '陕西', value: 61 },
{ name: '吉林', value: 51 },
{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },
{ name: '广东', value: 38 },
{ name: '青海', value: 57 },
{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },
{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },
{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },
{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
var scatterData = [
{
value: [117.6, 31],
name: '您所在的位置'
},
]
var scatterData1 = [
{
value: [116.6, 31],
name: '您所在的位置'
},
]
let echart_instance = echarts.init(echart)
function changeScatter() {
echart_instance.setOption({
series: [
{
data: airData,
geoIndex: 0,
type: 'map',
},
{
data: scatterData1,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 9,
color: 'red',
brushType: 'stroke',
}
}
]
});
}
let map_uri = 'https://asset.gign.xyz/map/china.json'
// map_uri = 'map/province/guangdong.json'
fetch(map_uri).then(res => res.text()).then(data => {
echarts.registerMap('map', data)
echart_instance.setOption({
title: {
text: '今日访问',
left: 'center'
},
geo: {
type: 'map',
map: 'map',
roam: true, // 开启拖动和缩放
label: { // 展示标签
show: true
},
zoom: 1, // 初始缩放比例
// center: [87, 43] // 初始地图中心点经纬度
},
tooltip: {
trigger: 'item',
triggerOn: 'click',
// formatter: '科目: {a}<br>姓名: {b}<br>成绩: {c}'
formatter: argc => {
console.log(argc)
return argc.name + ': ' + argc.value
}
},
series: [
{
data: airData,
geoIndex: 0,
type: 'map',
},
{
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 5,
color: 'red',
brushType: 'stroke',
}
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['snow', 'green']
},
calculable: true, // 选择范围
}
})
window.onresize = echart_instance.resize
})
</script>
</body>
</html>
