echarts地图使用

1.安装echarts并引用

2.下载地图数据（Json数据）下载地址：DataV.GeoAtlas地理小工具系列

3.加载地图

 <div ref="charts" style="width: 1000px; height: 800px"></div>

const charts = echarts.init(this.$refs['charts'])

   const option = {

        // 背景颜色

        backgroundColor: '#404a59',

        // 提示浮窗样式

        tooltip: {

          show: true,

          trigger: 'item',

          alwaysShowContent: false,

          backgroundColor: '#0C121C',

          borderColor: 'rgba(0, 0, 0, 0.16);',

          hideDelay: 100,

          triggerOn: 'mousemove',

          enterable: true,

          textStyle: {

            color: '#DADADA',

            fontSize: '12',

            width: 20,

            height: 30,

            overflow: 'break',

          },

          showDelay: 100,

          formatter: function (params) {

            if (typeof params.value[2] == 'undefined') {

              return `地区：${params.name}</br>数值：${params.value}`;

            } else {

              return `地区：${params.name}</br>数值：${params.value[2]}`;

            }

          },

        },

        visualMap: {

          // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射

          show: true,

          // 上下端文字

          // text: ['20000', '0'],

          // 最小值和最大值，必须指定

          min: 0,

          max: 20000,

          // 位置

          left: '10%',

          bottom: '10%',

          // 是否展示滑块

          calculable: true,

          // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置

          seriesIndex: [0],

          // 从下到上的颜色

          inRange: {

            color: ['#00467F', '#A5CC82'],

          },

          //字体颜色

          textStyle: {

            color: '#fff',

            map: 'china',

          },

        },

        series: [

          // {

          //   type: 'map',

          //   geoIndex: 0,

          //   mapType: 'china',

          //   coordinateSystem: 'geo',

          //   effectType: 'ripple',

          //   showEffectOn: 'render',

          //   rippleEffect: {

          //     period: 10,

          //     scale: 10,

          //     brushType: 'fill',

          //   },

          //   hoverAnimation: true,

          //   itemStyle: {

          //     normal: {

          //       color: 'rgba(255, 235, 59, .7)',

          //       shadowBlur: 10,

          //       shadowColor: '#333',

          //     },

          //   },

          //   zlevel: 1,

          //   data: this.arr,

          // },

          // {

          //   type: 'effectScatter',

          //   coordinateSystem: 'geo',

          //   effectType: 'ripple',

          //   showEffectOn: 'render',

          //   rippleEffect: {

          //     period: 10,

          //     scale: 10,

          //     brushType: 'fill',

          //   },

          //   hoverAnimation: true,

          //   itemStyle: {

          //     normal: {

          //       color: 'rgba(255, 235, 59, .7)',

          //       shadowBlur: 10,

          //       shadowColor: '#333',

          //     },

          //   },

          //   zlevel: 1,

          //   data: [

          //     { name: '西藏', value: [91.23, 29.5, 12333] },

          //     { name: '黑龙江', value: [128.03, 47.01, 1007] },

          //   ],

          // },

        ],

        // 地图配置

        geo: {

          map: 'china',

          label: {

            // 通常状态下的样式

            normal: {

              show: true,

              textStyle: {

                color: '#fff',

              },

            },

            // 鼠标放上去的样式

            emphasis: {

              textStyle: {

                color: '#fff',

              },

            },

          },

          // 地图区域的样式设置

          itemStyle: {

            normal: {

              // borderColor: 'rgba(147, 235, 248, 1)',

              borderColor: '#fff',

              borderWidth: 1,

              areaColor: {

                type: 'radial',

                x: 0.5,

                y: 0.5,

                r: 0.8,

                colorStops: [

                  {

                    offset: 0,

                    color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色

                  },

                  {

                    offset: 1,

                    color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色

                  },

                ],

                globalCoord: false, // 缺省为 false

              },

              shadowColor: 'rgba(128, 217, 248, 1)',

              shadowOffsetX: -2,

              shadowOffsetY: 2,

              shadowBlur: 10,

            },

            // 鼠标放上去高亮的样式

            emphasis: {

              areaColor: '#389BB7',

              borderWidth: 0,

            },

          },

        },

      };

      // 地图注册，第一个参数的名字必须和option.geo.map一致

      echarts.registerMap('china', zhongguo);

      charts.setOption(option);

arr数据（测试数据）

4.最终效果图

欢迎补充，一起进步。