Vue3 Echarts 省地图

一、效果

二、echarts的安装

npm install echarts

三、echarts各省份地图js导入

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

链接: https://pan.baidu.com/s/1eeyGAtpA5t1PXeo-L519sw 提取码: pp7r 复制这段内容后打开百度网盘手机App，操作更方便哦
--来自百度网盘超级会员v5的分享

下载后内容如下：

四、完整代码 

<template>
  <div id="sd-map" ref="mapBox" style="background-color: #ffffff;"></div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 导入echarts地图js
import '@/assets/js/shandong.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>
#sd-map{
  width: 60%;
  height: 600px;
}
</style>