使用echarts做中国地图，想为地图添加偏移量该如何修改
在做一个中国的出游助手网页的过程中，我们想点击到从省到市的地图后，将地图偏移到网页右端并且缩小，右边弹出我们爬虫得到的数据。但是每个市的地图大小不一样，就会出现部分市显示不全的情况，例如乐山市。修改对应的代码中的偏移量结果没有发生任何变化，是因为超过容器边界了吗？零基础html,js，希望能够有详细的回答！项目是django
还有一个小问题，在echartMapOptions.js中有设置鼠标移动到一个城市的点后出现悬浮窗显示这个地方，但是我们修改城市为省会城市，不知道哪里的传参出现错误，悬浮窗并没有出现
涉及的代码
echartMapOptions.js
// import echarts from 'echarts'
// import $ from 'jquery'
// import china from './china.js'
// import {cityNameData, provinceNameChineseToEng, cityNameChineseToEng} from './geoNameDictionary.js'
var geoCoordMap = {
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
'天津': [117.2, 39.13],
'重庆': [106.54, 29.59],
'拉萨市': [91.132212, 29.660361],
'乌鲁木齐市': [87.617733, 43.792818],
'兰州市': [103.823557, 36.058039],
'西安市': [108.948024, 34.263161],
'成都市': [104.065735, 30.659462],
'南宁市': [108.320004, 22.82402],
'郑州市': [113.665412, 34.757975],
'呼和浩特市': [111.670801, 40.818311],
'长春市': [125.3245, 43.886841],
'杭州市': [120.153576, 30.287459],
'南昌市': [115.892151, 28.676493],
'武汉市': [114.298572, 30.584355],
'广州市': [113.280637, 23.125178],
'贵阳市': [106.713478, 26.578343],
'西宁市': [101.778916, 36.623178],
'沈阳市': [123.429096, 41.796767],
'南京市': [118.767413, 32.041544],
'合肥市': [117.283042, 31.86119],
'石家庄市': [114.48, 38.03],
'太原市': [112.53, 37.87],
'哈尔滨市': [126.63, 45.75],
'福州市': [119.3, 26.08],
'济南市': [117, 36.65],
'长沙市': [113, 28.21],
'海口市': [110.35, 20.02],
'昆明市': [102.73, 25.04],
'银川市': [106.27, 38.47],
'台湾': [121.5135, 25.0308],
'香港': [114.109497, 22.396428],
'澳门': [113.5440083, 22.20167546]
}
var convertData = function (data, provinceEngName, cityNameEng) {
var res = []
for (var i = 0; i < data.length; i++) {
if (provinceEngName) {
let ret = cityIsInclude(provinceEngName, data[i].name, cityNameEng)
if (ret) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
} else {
let geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
}
return res
}
let cityIsInclude = function (provinceEngName, cityName, cityNameEng) {
let cities = cityNameData[`cityName_${provinceEngName}`]
for (let city in cities) {
if ((!cityNameEng && city.indexOf(cityName) !== -1) || (cityNameEng && city.indexOf(cityName) !== -1 && cities[city] === cityNameEng)) {
return true
}
}
return false
}
let data = [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '天津', value: 150},
{name: '重庆', value: 180},
{name: '拉萨市', value: 80},
{name: '乌鲁木齐市', value: 120},
{name: '兰州市', value: 90},
{name: '西安市', value: 160},
{name: '成都市', value: 140},
{name: '南宁市', value: 110},
{name: '郑州市', value: 130},
{name: '呼和浩特市', value: 70},
{name: '长春市', value: 95},
{name: '杭州市', value: 170},
{name: '南昌市', value: 115},
{name: '武汉市', value: 190},
{name: '广州市', value: 220},
{name: '贵阳市', value: 105},
{name: '西宁市', value: 75},
{name: '沈阳市', value: 85},
{name: '南京市', value: 175},
{name: '合肥市', value: 125},
{name: '石家庄市', value: 145},
{name: '太原市', value: 100},
{name: '哈尔滨市', value: 130},
{name: '福州市', value: 155},
{name: '济南市', value: 135},
{name: '长沙市', value: 120},
{name: '海口市', value: 80},
{name: '昆明市', value: 140},
{name: '银川市', value: 95},
{name: '台湾', value: 90},
{name: '香港', value: 70},
{name: '澳门', value: 65}
];
function MapDrillDown(echartDom, obj) {
this.chartDom = echarts.init(echartDom)
this.optionMap = null
// tag: 0全国 1省 2市
this.tag = 0
this.timer = null
this.clickLock = true
this.provinceOrCityName = ''
this.lastProvinceOrCityName = ''
this.mapOffset = [0, 0];
this.mapZoom = 1; // 添加地图缩放级别
this.lastLevelMap = null;
// this.loadingObj = obj.$message
}
MapDrillDown.prototype = {
// 设置区域颜色
setRegions: function (regionsJson) {
var colors = ['#083967', '#13548d', '#1c74b2']
var colorsLen = colors.length
var features = regionsJson.features
var echatsRegions = []
// var echatsRegions=[{
// name: '南海诸岛',
// value: 0,
// itemStyle: {
// normal: {
// opacity: 0,
// label: {
// show: false
// }
// }
// }
// }];
for (var i = 0, len = features.length; i < len; i++) {
var regionsItem = {
name: features[i].properties.name,
itemStyle: {
normal: {
areaColor: colors[Math.floor(Math.random() * colorsLen)]
}
}
}
echatsRegions.push(regionsItem)
}
return echatsRegions
},
setMap: function () {
this.optionMap = {
tooltip: {
trigger: 'item',
// triggerOn:'click', // 鼠标点击时触发
enterable: true, // 鼠标是否能进入提示框内
formatter: function (params) {
var content = ''
if (params.value !== 0) {
content = `<p style='text-align: center;min-width: 100px;'><span class='dpb' style='padding: 5px 8px;font-family: 微软雅黑;font-size: 18px;color: #ffffff;'>${data.name}</span><br></p>`
}
this.lastLevelMap = JSON.parse(JSON.stringify(this.optionMap));
return content
}
},
geo: {
map: 'china',
label: {
normal: {
show: true,
color: '#639bc3'
}
},
itemStyle: {
normal: {
areaColor: '#083967',
borderColor: '#48c7ff',
borderWidth: 2
},
emphasis: {
areaColor: '#48c7ff' // 高亮效果
}
}
},
series: [
{
name: '正常',
type: 'scatter',
coordinateSystem: 'geo',
opacity: 1,
data: convertData(data),
// data: [],
symbolSize: 10, // 散点图的大小
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#00d0e4',
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
borderColor: '#fff',
borderWidth: 2
}
}
}
]
}
// 图表自适应
window.addEventListener('resize', function () {
this.chartDom.resize()
}.bind(this))
this.optionMap.geo.regions = this.setRegions(china) // 设置区域颜色
this.chartDom.setOption(this.optionMap)
},
setClick: function () {
let that = this
// 点击事件
that.chartDom.on('click', function (params) { // 点击事件
clearTimeout(that.timer)
that.timer = setTimeout(function () {
if (!that.clickLock) return
if (params.componentType === 'geo') { // 点击地图区域
that.reFreshMap(params.name)
}
that.clickLock = true
}, 300)
})
// 双击事件
that.chartDom.on('dblclick', function (params) {
that.clickLock = false
clearTimeout(that.timer)
that.tag = 0
that.optionMap.series[0].data = convertData(data)
that.optionMap.geo.map = 'china'
that.optionMap.geo.left = 'center';
that.optionMap.geo.top = 'center';
that.optionMap.geo.right = 'auto';
that.optionMap.geo.bottom = 'auto';
that.optionMap.geo.width = '80%'; // 设置地图容器的宽度
that.optionMap.geo.height = '100%'; // 设置地图容器的高度
that.chartDom.setOption(that.optionMap)
that.clickLock = true
})
},
reFreshMap: function (paramsName) {
let that = this
// this.loadingObj.showLoading({
// title: '正在加载...'
// })
if (that.tag === 0) {
this.provinceOrCityName = paramsName
that.tag++
let provinceEngName = provinceNameChineseToEng(this.provinceOrCityName)
$.get('https://orangleli.github.io/imagesResources/echartMapResources/geoProvince/' + provinceEngName + '.json', function (mapJson) {
// that.loadingObj.hideLoading()
that.optionMap.series[0].data = convertData(data, provinceEngName)
that.optionMap.geo.map = provinceEngName
echarts.registerMap(provinceEngName, mapJson)
if (that.tag === 2) {
that.mapOffset[0] -= 4; // 设置地图的水平偏移量
that.optionMap.geo.left = that.mapOffset[0] + '%';
that.tag = 1; // 设置 that.tag 的值为 1，表示返回到上一级地图（省地图）
that.optionMap.geo.width = '70%'; // 设置地图容器的宽度
that.optionMap.geo.height = '100%'; // 设置地图容器的高度
}
that.chartDom.setOption(that.optionMap)
})
this.lastProvinceOrCityName = this.provinceOrCityName
} else if (that.tag === 1) {
if (this.lastProvinceOrCityName.includes('直辖市') > 0) return
this.provinceOrCityName = paramsName
that.tag++
var provinceEngName = provinceNameChineseToEng(this.lastProvinceOrCityName)
let cityNameEng = cityNameChineseToEng(that.provinceOrCityName, provinceEngName)
$.get('https://orangleli.github.io/imagesResources/echartMapResources/city/' + provinceEngName + '/' + cityNameEng + '.json', function (mapJson) {
// that.loadingObj.hideLoading()
that.optionMap.series[0].data = convertData(data, provinceEngName, cityNameEng)
that.optionMap.geo.map = provinceEngName
echarts.registerMap(provinceEngName, mapJson)
that.mapOffset = [-6, 0]; // 设置地图的偏移量
that.optionMap.geo.left = that.mapOffset[0] + '%'; // 设置地图容器的左边距
that.optionMap.geo.zoom = 0.7; // 设置地图的缩放比例
that.chartDom.setOption(that.optionMap)
that.chartDom.resize();
})
} else {
// that.loadingObj.hideLoading()
}
},
init() {
this.setMap()
this.setClick()
}
}
// export {
// MapDrillDown
// }
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国之旅</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url("/static/images/gbgb.jpg");
background-size: cover;
}
.container {
display: flex;
height: 100vh;
}
.map-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s;
}
.map {
width: 80%;
height: 80%;
}
.content-container {
width: 0%;
background-color: rgba(255, 255, 255, 0.87);
display: flex;
flex-direction: column;
transition: width 0.5s;
}
.buttons-container {
height: 20%;
display: none;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.buttons-container button {
margin-bottom: 10px;
}
.content-body {
height: 80%;
padding: 20px;
overflow-y: scroll;
}
.content-body p {
display: none;
}
</style>
</head>
<body>
<link rel="stylesheet" href="../static/css/button.css">
<div class="container">
<div class="map-container">
<div id="chart" class="map"></div>
</div>
<div class="content-container">
<div class="buttons-container">
<!-- 右侧按钮 -->
<button onclick="showContent(1)" class="css-button-fully-rounded--blue">美食推荐</button>
<button onclick="showContent(2)" class="css-button-fully-rounded--blue">景点推荐</button>
<button onclick="showContent(3)" class="css-button-fully-rounded--blue">天气</button>
<button onclick="showContent(4)" class="css-button-fully-rounded--blue">按钮4</button>
</div>
<div class="content-body">
<!-- 数据库内容 -->
<p id="content-1">按钮1的内容</p>
<p id="content-2">按钮2的内容</p>
<p id="content-3">按钮3的内容</p>
<p id="content-4">按钮4的内容</p>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/echarts.js"></script>
<script src="/static/js/china.js"></script>
<script src="/static/js/geoNameDictionary.js"></script>
<script src="/static/js/echartMapOptions.js"></script>
<script>
let mapDrillDown = new MapDrillDown(document.getElementById('chart'));
mapDrillDown.init();
let clickCounter = 0; // 计数器，用于记录地图被点击的次数
let selectedButton = null; // 当前选中的按钮
mapDrillDown.chartDom.on('click', function (params) {
if (params.componentType === 'geo') { // 点击了地图区域
clickCounter++; // 计数器加1
if (clickCounter === 2) { // 地图被点击两次
setTimeout(function () {
moveMapToLeft();
showButtons();
}, 1000); // 延迟1秒后移动地图和显示按钮
}
}
});
mapDrillDown.chartDom.on('dblclick', function (params) {
resetState(); // 双击地图时重置状态
});
function moveMapToLeft() {
let mapContainer = document.querySelector('.map-container');
mapContainer.style.width = '60%';
let contentContainer = document.querySelector('.content-container');
contentContainer.style.width = '40%';
}
function showButtons() {
let buttonsContainer = document.querySelector('.buttons-container');
buttonsContainer.style.display = 'flex';
}
function resetState() {
clickCounter = 0; // 重置计数器
selectedButton = null; // 重置选中的按钮
let mapContainer = document.querySelector('.map-container');
mapContainer.style.width = '100%';
let contentContainer = document.querySelector('.content-container');
contentContainer.style.width = '0%';
hideButtons();
hideContent();
location.reload();
}
function showContent(contentId) {
hideContent(); // 隐藏当前显示的内容
let content = document.getElementById(`content-${contentId}`);
content.style.display = 'block';
selectedButton = contentId;
}
function hideContent() {
let contentBodies = document.querySelectorAll('.content-body p');
contentBodies.forEach(function (content) {
content.style.display = 'none';
});
selectedButton = null;
}
function hideButtons() {
let buttonsContainer = document.querySelector('.buttons-container');
buttonsContainer.style.display = 'none';
}
</script>
</html>
给你找了一个demo 你看下吧
效果图
代码
var mapName = 'china'
var data = [
{name:"北京",value:199},
{name:"天津",value:42},
{name:"河北",value:102},
{name:"山西",value:81},
{name:"内蒙古",value:47},
{name:"辽宁",value:67},
{name:"吉林",value:82},
{name:"黑龙江",value:123},
{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:180},
{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}]},
];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = 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;
};
option = {
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#000',
decoration: 'none',
},
// position: function (point, params, dom, rect, size) {
// return [point[0], point[1]];
// },
formatter: function(params) {
// console.log(params)
var tipHtml = '';
tipHtml = '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
+'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">'+'</i>'
+'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.name+'</span>'+'</div>'
+'<div style="padding:20px">'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'单位总数：'+'<span style="color:#11ee7d;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#f48225;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#f4e925;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>'
+'总人数：'+'<span style="color:#25f4f2;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>'
+'</div>'+'</div>';
setTimeout(function() {
tooltipCharts(params.name);
}, 10);
return tipHtml;
}
},
visualMap: {
show: true,
min: 0,
max: 200,
left: '10%',
top: 'bottom',
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#04387b', '#467bc0'] // 蓝绿
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
areaColor: '#4499d0',
}
}
},
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: '#fff'
}
}
},
{
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',
zlevel: 6,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 10)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
},
]
};
这个路径不要这么写，文件访问不到，都下载到本地使用“https://orangleli.github.io/imagesResources/echartMapResources/city/”
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7469850
- 以下回答由chatgpt基于相关博客总结生成:
很抱歉，以上提供的参考资料并没有提供与问题相关的内容和代码。请提供相关的代码和更详细的问题描述，以便能够给出更好的回答。