<template>
<div class="chinaMap">
<div id="china_map"></div>
</div>
</template>
<script>
const echarts = require("echarts");
import 'echarts/map/js/china.js'
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie() {
// 初始化echarts实例
let chinaMap = echarts.init(
document.getElementById('china_map')
);
// 进行相关配置
var geoCoordMap = { //自定义城市坐标
"郑州": [113.62, 34.75],
"西安": [108.95, 34.27],
"青岛": [120.33, 36.07],
"宁波": [121.56, 29.86],
"芜湖": [118.38, 31.33]
};
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;
};
var chartOption = {
// geo配置详解: https://echarts.baidu.com/option.html#geo
geo: { // 地理坐标系组件用于地图的绘制
map: 'china', // 表示中国地图
// roam: true, // 是否开启鼠标缩放和平移漫游
zoom: 1.2, // 当前视角的缩放比例(地图的放大比例)
label: {
show: false
},
regions: [{ //隐藏南海区域
name: '南海诸岛',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}],
itemStyle: {
normal: {
areaColor: '#131727',
borderColor: '#4c505c'
},
emphasis: {
borderWidth: 0,
borderColor: '#3082ff',
areaColor: "#3082ff",
shadowBlur: 20,
shadowColor: 'rgba(145, 194, 215, 0.5)'
}
}
},
series: [
{
name: '计划单列市',
type: 'effectScatter', //影响散点
coordinateSystem: 'geo',
symbolSize: 12,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
color: '#3cfbf0',
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#3cfbf0',
shadowBlur: 10,
shadowColor: '#333'
},
},
data: convertData([{
name: "郑州"
},
{
name: "西安"
},
{
name: "青岛"
},
{
name: "宁波"
},
{
name: "芜湖"
},
]),
}
]
}
// 使用刚指定的配置项和数据显示地图数据
chinaMap.setOption(chartOption);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => chinaMap.resize(), false);
}
},
destroyed() {
window.onresize = null;
}
}
</script>
echart 中国地图并标记城市
猜你喜欢
转载自blog.csdn.net/qq_35086913/article/details/107593003
今日推荐
周排行