VUE之Echarts地图引入及配置项详解

步骤：

建立dom用于渲染地图组件

<div ref="map_ref" style="width:100%;height:100%" class="map_charts" />

引入所需js文件

import echarts from 'echarts'
require('echarts/map/js/china')//这里import引入也可以

初始化echarts图表

const chinachart = echarts.init(this.$refs.map_ref)//用于将图表渲染至dom元素

定义地图配置项

 const chartOption = {//提示器
          tooltip: {
            formatter(par) {//这里可自定义提示器内容
              if (par.name === '台湾' || par.name === '南海诸岛') {
                return
              }
              if (par.data.type === 'reg') {
                const htmlStr = par.name + '   ' + '注册' + par.data.value + '人' +
                '
' + '排名' + '   ' + par.data.rank + '
' + '占比' +
                '   ' + par.data.propor + '%'
                return htmlStr
              }
            }
          },
          visualMap: {//这里为地图图例
            show: true,
            min: 40,
            max: 2100,
            left: 10,
            bottom: 10,
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: false,
            orient: 'horizontal',
            seriesIndex: [0],
            inRange: {
              color: ['#C4EBFF', '#009CFF']//图例色域
            },
            pieces: [//图例区块
              { gt: 300000, lte: 2000000 },
              { gt: 10000, lte: 300000 },
              { gt: 5000, lte: 10000 },
              { gt: 2000, lte: 5000 },
              { gt: 1100, lte: 2000 },
              { gt: 900, lte: 1100 },
              { gt: 700, lte: 900 },
              { gt: 500, lte: 700 },
              { gt: 300, lte: 500 },
              { gt: 50, lte: 300 },
              { gt: 0, lte: 50 }
            ]
          },
          geo: { // 地理坐标系组件用于地图的绘制
            map: 'china', // 表示中国地图
            roam: false, // 是否开启鼠标缩放和平移漫游
            zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                borderWidth: 1,
                borderColor: '#F6FBFF'
                // areaColor: '#C4EDFA'
              },
              // borderColor: 'rgba(0, 0, 0, 0.2)',
              emphasis: { // 高亮状态下的多边形和标签样式
                shadowBlur: 20,
                areaColor: '#2B91B7',
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              name: '',
              type: 'map',
              map: 'china',
              geoIndex: 0,
              label: {
                show: false
              },
              emphasis: {
                show: true
              },
              data: newArr
            },
            {//此处为地图气泡
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: [60, 60],//气泡宽高
              tooltip: {
                show: false
              },
              label: {//气泡内配置
                normal: {
                  show: true,
                  textStyle: {//字体
                    color: 'black',
                    fontSize: 11
                  },
                  formatter(val) {//自定义显示内容（格式化）
                    if (val.data.type === 'tradeNum') {
                      const htmlVal = val.name + '\n' + val.data.data + '\n' + '人'
                      return htmlVal
                    }
                  }
                }
              },
              itemStyle: {//气泡样式配置
                normal: {
                  color: '#FFDF25', // 标志颜色
                  opacity: 1
                }
              },
              hoverAnimation: true,
              zlevel: 1,
              data: arr
            }
          ]
        }
        chinachart.setOption(chartOption)
        window.addEventListener('resize', () => {
          chinachart.resize()
        })

效果图

做过echarts可视化的朋友对以上大部分配置项不会陌生，希望可以帮到您。