vue使用echarts创建中国地图（详细步骤）
首先我们需要安装echarts
npm install echarts --save
这里需要注意的是，现在echarts升级到5了，有些新特性，这里我们安装4.9的
npm install [email protected]
然后在main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//这两步很重要，没有的话地图不出来,这是全局引入
//这里的话需要检查一下我们安装后这个路径对不对
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
准备工作做完后,然后在页面里操作代码
<template>
<div>
<div id="myChartChina" :style="{width: '100%', height: '700px',margin:'0 auto'}">div>
div>
template>
<script>
export default {
mounted() {
this.drawLine();
},
methods:{
drawLine(){
// 基于准备好的dom，初始化echarts实例
var myChartContainer = document.getElementById('myChartChina');
var resizeMyChartContainer = function(){
myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
}
resizeMyChartContainer();
var myChartChina = this.$echarts.init(myChartContainer);
function randomData() {
return Math.round(Math.random()*500);
}
// 绘制图表
var optionMap = {
tooltip: {
triggerOn: "click",
formatter: function(e, t, n) {
return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "
" + e.name + "：" + e.value
}
},
legend: {
orient: 'vertical',
left: 'left',
data:['']
},
visualMap: {
min: 0,
max: 1000,
left: 26,
bottom: 40,
showLabel: !0,
text: ["高", "低"],
pieces: [{
gt: 100,
label: "> 100 人",
color: "#7f1100"
}, {
gte: 10,
lte: 100,
label: "10 - 100 人",
color: "#ff5428"
}, {
gte: 1,
lt: 10,
label: "1 - 9 人",
color: "#ff8c71"
}, {
gt: 0,
lt: 1,
label: "疑似",
color: "#ffd768"
}, {
value: 0,
color: "#ffffff"
}],
show: !0
},
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.23,
top: 120,
label: {
normal: {
show: !0,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
}
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series : [
{
name: "确诊病例",
type: "map",
geoIndex: 0,
data:[{
name: "南海诸岛",
value: 0
},
{
name: '北京',
value: 54
},
{
name: '天津',
value: 13
},
{
name: '上海',
value: 40
},
{
name: '重庆',
value: 75
},
{
name: '河北',
value: 13
},
{
name: '河南',
value: 83
},
{
name: '云南',
value: 11
},
{
name: '辽宁',
value: 19
},
{
name: '黑龙江',
value: 15
},
{
name: '湖南',
value: 69
},
{
name: '安徽',
value: 60
},
{
name: '山东',
value: 39
},
{
name: '新疆',
value: 4
},
{
name: '江苏',
value: 31
},
{
name: '浙江',
value: 104
},
{
name: '江西',
value: 36
},
{
name: '湖北',
value: 1052
},
{
name: '广西',
value: 33
},
{
name: '甘肃',
value: 7
},
{
name: '山西',
value: 9
},
{
name: '内蒙古',
value: 7
},
{
name: '陕西',
value: 22
},
{
name: '吉林',
value: 4
},
{
name: '福建',
value: 18
},
{
name: '贵州',
value: 5
},
{
name: '广东',
value: 98
},
{
name: '青海',
value: 1
},
{
name: '西藏',
value: 0
},
{
name: '四川',
value: 44
},
{
name: '宁夏',
value: 4
},
{
name: '海南',
value: 22
},
{
name: '台湾',
value: 3
},
{
name: '香港',
value: 5
},
{
name: '澳门',
value: 5
}
]
}
]
}
myChartChina.setOption(optionMap);
}
}
}
script>
<style>
style>