项目源码附js/json地图数据（下载项目源码后请使用Npm install 来安装相关依赖）
效果
使用前请使用npm(cnpm)安装echarts，详情见官网。
本文作为笔记demo只引入5个省(市)，根据需求可以引入更多。
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
import '../node_modules/echarts/map/js/province/beijing.js' // 引入北京地图数据
import '../node_modules/echarts/map/js/province/fujian.js' // 引入福建地图数据
import '../node_modules/echarts/map/js/province/anhui.js' // 引入安徽地图数据
import '../node_modules/echarts/map/js/province/xinjiang.js' // 引入新疆地图数据
import '../node_modules/echarts/map/js/province/xizang.js' // 引入西藏地图数据
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue：
<template>
<div id="app">
<div id="chinaMap" style="height:800px;width:1000px;" ref="myEchart"></div>
<div id="myChart" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
var echarts = require('echarts/lib/echarts');
require('echarts/map/js/china') // 引入中国地图数据
require('echarts/map/js/world') // 引入世界地图数据
export default {
name: 'App',
mounted() {
this.chinamap();
},
methods: {
chinamap(){
var myChart = echarts.init(document.getElementById("chinaMap"));
window.addEventListener('resize', function () {
myChart.resize()
})
var option= {
backgroundColor: '#87CEFA', //设置背景颜色
title: {
show:true,
text: '标题--中国地图',
subtext: 'made by xzc',
left:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'bottom',
splitList: [
{start: 10, end:20},
{start: 6, end: 10},
{start: 0, end: 6},
],
color: ['#1E90FF', '#7FFFAA', '#F0E68C']
},
//配置属性
series: [{
name: '数量',
type: 'map',
map: 'china',
roam: false,
zoom:1.2,
label: {
normal: {
show: true ,
},
emphasis: {
show: false
}
},
data:[
{name: '北京',value:randomData() },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },{name: '广东',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },{name: '澳门',value: randomData() }
]
}]
};
var count = -1;
setInterval(function() {
var curr = count % 34; //数字为cityArr.length
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curr
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 因为只有一组数据，所以此处应为0
dataIndex: curr
});
count++;
/*
if (index > cityArr.length - 1) {
count = -1
}
*/
}, 500);
/**
* 使用刚指定的配置项和数据显示图表。
* */
myChart.setOption(option);
//获取随机数
function randomData() {
return Math.round(Math.random()*(12-1)+1)
}
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(dataIndex);
});
myChart.on('click', function (chinaParam) {
if(chinaParam.name=="北京"||chinaParam.name=="福建"||chinaParam.name=="安徽"||chinaParam.name=="新疆"||chinaParam.name=="西藏"){
var option = myChart.getOption();
option.series[0].map = chinaParam.name;
option.series[0].mapType = chinaParam.name;
myChart.clear();
console.log(chinaParam.name);
myChart.setOption(option,true);
}else{
alert(chinaParam.name+"区域还未开通！");
}
});
}
},
created () {
},
watch: {
}
}
</script>
