各省份、区域的地图json文件可以去 http://datav.aliyun.com/tools/atlas 找,能下载。
中国地图(带南海诸岛)
上代码
<template>
<div style="width: 950px;height:610px;"/>//画板大小
</template>
<script lang="js">
import echarts from 'echarts'
import 'echarts/theme/macarons'
import china from '@/components/mapJson/china.json'
//引入echarts和中国地图的json,地图路径不要照抄
export default {
data() {
return {
jsonData: [],
mapTitle: "",
mapZoom: "",
mapLayoutCenter: "",
mapType: ""
}
},
methods: {
init() {
this.mapType = 'china'
echarts.registerMap(this.mapType , china);
this.mapTitle = "全国降雨量分布"
this.mapZoom = 5.5
this.mapLayoutCenter = ['50%','45%']
this.jsonData = [{
name: "河北",
value: 9000
},
{
name: "河南",
value: 7000
},
{
name: "四川",
value: 5000
}]
this.mapchart = echarts.init(this.$el,'macarons')
this.mapchart.setOption({
title: {//标题
show: true,
text: this.mapTitle,
textStyle: {
color: '#252733',
fontSize: 18,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold'
},
padding: [0, 0, 0, 50]
},
visualMap: {//地图左下角视觉映射
show: true,
type: "piecewise",
max: 100000,
inRange: {
color: ['#A5DCF4','#006edd']
},
pieces: [{
gt: 8000
},
{
gt: 6000,
lte: 8000
},
{
gt: 4000,
lte: 6000
},
{
gt: 2000,
lte: 4000
},{
lt: 2000
}
],
padding: [0, 0, 80, 60]
},
series: [
{
type: 'map',
mapType: this.mapType,
zoom: this.mapZoom,//地图大小
label: {
show: true,
color: 'black'
},
itemStyle: {//地图线条颜色、粗细,块颜色
normal: {
borderColor: '#8FE48F',
borderWidth: 1,
areaColor: 'RGBA(204, 232, 255, 1)'
}
},
layoutCenter: this.mapLayoutCenter,//地图位置
layoutSize: 100,
data: this.jsonData//地图数据
}
]
});
}
}
}
</script>
效果图如下: