echarts 中国地图(带南海诸岛) 及各省份地图json文件

各省份、区域的地图json文件可以去 /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.5this.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>

效果图如下：