最近在做一个地图显示的需求，本来用的是百度地图插件显示的中国地图，但后来由于不能完美的支持世界地图，所以就转而用ECharts来实现。
众所周知，ECharts2.0在地图方面做的非常良好，但是到3.0后对世界地图的支持出现了很大问题，但是经过耐心的研究，终于还是用3.0版本做出来了，先上效果图：
废话不多说，以下是代码，原创：
<template>
<div style="position: relative;">
<div class="showCharts">
<echarts id="world-map" :option="option" auto-resize :style="{width:'50%',height:'490px'}" theme="shine"></echarts>
</template>
<script>
import Echarts from './common/echarts'
import echarts from 'echarts'
import '../../node_modules/echarts/map/js/world.js'
import '../../node_modules/echarts/map/js/china.js'
export default {
name: 'homePageEducation',
components: {
Echarts
data () {
return {
option: {
// backgroundColor: '#02AFDB', // 地图背景色
backgroundColor: 'rgba(154,195,246,.3)',
title: {
left: '40%',
top: '0px',
textStyle: {
color: '#fff',
opacity: 0.7
dataRange: {
show: false,
min: 0,
max: 1000000,
text: ['High', 'Low'],
realtime: false,
calculable: false,
color: ['rgb(223,63,41)', 'yellow', 'lightskyblue']
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 1, // 提示框移动动画过渡时间
enterable: true, // 鼠标是否可进入提示框
formatter: function (params) {
var tipPanel = ''
if (params.data.coord) {
tipPanel = '<div style="text-align:left">组织名称：' + params.data.OrgName + '</div>' +
'<div style="text-align:left">所在地址：' + params.data.Address + '</div>'
} else {
tipPanel = ''
return tipPanel
geo: {
map: 'world',
label: {
normal: {
show: false // 显示洲名
emphasis: {
show: false
roam: false,
silent: false,
itemStyle: {
normal: {
areaColor: 'transparent', // #37376e
borderColor: 'transparent' // #000
emphasis: {
areaColor: 'transparent' // #2a333d
series: [{
type: 'map',
mapType: 'world',
zoom: this.zoomSize, // 设置地图大小 - 领导主页设置为1，党建地图页显示为5
roam: true, // 是否开启平游或缩放
scaleLimit: { // 滚轮缩放的极限控制
min: 1,
max: 5
mapLocation: {
y: 100
symbolSize: 12,
label: {
normal: {
show: false // 默认显示国家名
emphasis: {
show: true // 鼠标放置上去显示国家名
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
data: [
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
{name: 'United Arab Emirates', value: 8441.537},
{name: 'Argentina', value: 40374.224},
{name: 'Armenia', value: 2963.496},
{name: 'French Southern and Antarctic Lands', value: 268.065},
...此处省略多处地点...
{name: 'Ukraine', value: 46050.22},
{name: 'Uruguay', value: 3371.982},
{name: 'United States of America', value: 312247.116},
{name: 'Yemen', value: 22763.008},
{name: 'South Africa', value: 51452.352},
{name: 'Zambia', value: 13216.985},
{name: 'Zimbabwe', value: 13076.978}
markPoint: { // 图表标注
// symbol: 'image:// http://www.yantiansf.cn/mapImage/1.gif',
// symbol: './map_myIcon01.png',
// symbol: 'emptyCircle',
symbolSize: 12, // 图形大小
label: {
normal: {
show: true
emphasis: {
show: true
effect: {
show: true,
shadowBlur: 0
itemStyle: {
normal: {
color: '#FFD700' // 标记点颜色
data: [
coord: [108.929074, 34.219473],
OrgName: '北京第一党支部',
Address: '西安市高新区'
props: {
// 动态设置地图大小
zoomSize: {
type: Number,
default: 1
methods: {},
mounted () {
// 控制鼠标移入指定地区颜色不变
</script>
<style scoped>
.el-main{
padding: 20px 0 0;
</style>
安装Echarts插件后就可以直接引入这段代码，希望大家参考。
转载请注明出处。
关于作者：JeremyCC
一个爱唱歌的前端工程狮，喜欢我可以点关注噢！（头像仅供参考，哈哈）
