vue+echarts实现省份地图展示

一、效果

 下面以四川省地图为例，展示效果如下： 

二、echarts的安装

 这里我是使用npm进行安装的，命令如下：

npm install echarts

三、echarts各省份地图js导入

以下是我下载好的各省份的数据，可以直接下载使用，放在项目js文件夹下，在页面内引入。

百度网盘链接：https://pan.baidu.com/s/1BLMQeLWfhHyXEOoE9CiOLA

提取码：rcy5

四、完整代码 

<template>
    <div id="sc-map" ref="mapBox" style="background-color: #ffffff;"></div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 导入echarts地图js
import '@/assets/js/sichuan.js'
export default {
  name: 'EchartsMap',
  data() {
    return {
      chart: null,
      options: {},
    }
  },
  created() {
    this.options = {
	  // 注释部分是图的标题，按需要进行修改
      // title: {
      //   text: '各区域设备分布情况',
      //   subtext: '',
      //   padding: [15, 15],
      //   textStyle: {
      //     fontFamily: '宋体',
      //     fontSize: 16,
      //     fontWeight: 'normal',
      //     color: '#55aaff'
      //   }
      // },
      series: [
        {
          map: '四川',
          type: 'map',
          aspectScale: 0.9,
          roam: false,
          label: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 12,
            }
          },
          itemStyle: {
            normal: {
			  // 图形的描边颜色
              borderColor: '#55aaff',
			  // 描边线宽。
              borderWidth: 1, 
			  // 柱条的描边类型。
              borderType: 'solid', 
			  // 图形的颜色 #233F53
              areaColor: '#f1f1f1', 
			  // 图形阴影的模糊大小。
              shadowBlur: 5,
			  // 阴影色 #233F53
              shadowColor: '#cecece', 
			  // X轴阴影
              shadowOffsetX: 5, 
			  // Y轴阴影
              shadowOffsetY: 5,
              label: {
				 // 显示省份下面市、州的名称
                show: true,
                textStyle: {
                  color: '#000000',
                  fontSize: 10,
                },
              }
            },
            // 鼠标放上去后，样式改变
            emphasis: {
			   // 图形的描边颜色
              borderColor: '#2378f7', 
              borderWidth: '1',
			  // 阴影色
              areaColor: '#55aaff',
              label: {
                show: true,
                textStyle: {
                  color: '#000000',
                  fontSize: 10,
                }
              }
            },
            effect: {
              show: true,
              shadowBlur: 10,
              loop: true,
            }
          },
          
        }
      ]
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.mapBox)
    this.chart.setOption(this.options)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style scoped>
#sc-map{
	width: 60%;
	height: 600px;
}
</style>

如果要在地图上标点，则需要添加以下：

markPoint: {
	// 自定义标记点图标
     symbol: 'image://' + require('../assets/img/edit.png'),
    // 图标大小
     symbolSize: [20, 20], 
     label: {
         position: 'top',
		 // 数字颜色
         color: '#000000'
     },
     // 数组存放地址坐标，就是上面的标记点
     data: [
        { name: '成都市', coord: [102.72,25.05], value: '78' },
     ]
}