vue+Echarts 地图功能实现新增用户,用户沟通弧线,在线人数,区域总数

136 阅读11分钟

导入Echarts

npm install echarts@4.9.0 --save

声明对象

在main.js中

import echarts from 'echarts'

require('echarts/map/js/china')

Vue.prototype.$echarts = echarts

在indexnew.vue页面

 引入部分

import 'echarts/map/js/china'

import geoCoordMap from '../../src/assets/json/geoCoordMap'

html部分

<div id="productMap" style="position: absolute;top: 0;"></div>

data部分  

colorlist: [

    '#FF8326',

    '#FF9B51',

    '#FFB47C',

    '#FFC192',

    '#FFCDA8',

    '#FFD9BD',

    '#FFE6D3',

    '#FFF2E9',

    '#fff',

  ],

  chinaname: [

    '北京',

    '天津',

    '上海',

    '重庆',

    '河北',

    '河南',

    '云南',

    '辽宁',

    '黑龙江',

    '湖南',

    '安徽',

    '山东',

    '新疆',

    '江苏',

    '浙江',

    '江西',

    '湖北',

    '广西',

    '甘肃',

    '山西',

    '内蒙古',

    '陕西',

    '吉林',

    '福建',

    '贵州',

    '广东',

    '青海',

    '西藏',

    '四川',

    '宁夏',

    '海南',

    '台湾',

    '香港',

    '澳门',

    '南海诸岛',

  ],

  fullWidth:'',

  fullWidthwidth:'',

  fullHeight:'',

  newregisterdata: [],

  newuserdata: [

    { name: '台湾', value: 60 },

    { name: '驻马店', value: 60 },

    { name: '新疆', value: 60, setname: 'newuser' },

    { name: '江苏', value: 35 },

    { name: '浙江', value: 35 },

    { name: '江西', value: 35 },

    { name: '湖北', value: 35 },

  ],

  newactiondata: [

    { name: '新疆', value: 60 },

    { name: '北京', value: 60 },

    { name: '天津', value: 60 },

    { name: '上海', value: 60 },

    { name: '重庆', value: 60, setname: 'newrelese' },

    { name: '河北', value: 60, setname: 'newrelese' },

  ],

  newrelesedata: [

    { name: '新疆', value: 60 },

    { name: '北京', value: 60 },

    { name: '天津', value: 60 },

    { name: '上海', value: 60 },

    { name: '重庆', value: 60, setname: 'newrelese' },

    { name: '河北', value: 60, setname: 'newrelese' },

  ],

  newuserssdata: [

    { name: '北京', value: 60 },

    { name: '天津', value: 60 },

    { name: '上海', value: 60 },

    { name: '重庆', value: 60 },

    { name: '河北', value: 60 },

  ],

  chinalist: [

    { name: '北京', value: 0 },

    { name: '天津', value: 0 },

    { name: '上海', value: 0 },

    { name: '重庆', value: 0 },

    { name: '河北', value: 0 },

    { name: '河南', value: 0 },

    { name: '云南', value: 0 },

    { name: '辽宁', value: 0 },

    { name: '黑龙江', value: 0 },

    { name: '湖南', value: 0 },

    { name: '安徽', value: 0 },

    { name: '山东', value: 0 },

    { name: '新疆', value: 0 },

    { name: '江苏', value: 0 },

    { name: '浙江', value: 0 },

    { name: '江西', value: 0 },

    { name: '湖北', value: 0 },

    { name: '广西', value: 0 },

    { name: '甘肃', value: 0 },

    { name: '山西', value: 0 },

    { name: '内蒙古', value: 0 },

    { name: '陕西', value: 0 },

    { name: '吉林', value: 0 },

    { name: '福建', value: 0 },

    { name: '贵州', value: 0 },

    { name: '广东', value: 0 },

    { name: '青海', value: 0 },

    { name: '西藏', value: 0 },

    { name: '四川', value: 0 },

    { name: '宁夏', value: 0 },

    { name: '海南', value: 0 },

    { name: '台湾', value: 0 },

    { name: '香港', value: 0 },

    { name: '澳门', value: 0 },

    { name: '南海诸岛', value: 0 },

  ],

  SHData: [

    [{ name: '上海' }, { name: '大连', value: 60 }],

    [{ name: '上海' }, { name: '成都', value: 60 }],

    [{ name: '合肥' }, { name: '海南', value: 60 }],

    [{ name: '郑州' }, { name: '杭州', value: 60 }],

    [{ name: '北京' }, { name: '大连', value: 60 }],

    ],

  geoCoordMap: geoCoordMap,

  planePath:'path://M102.5,170.28l72.65-81.68c3.92-4.7,10.91-5.34,15.61-1.43c0.52,0.43,0.99,0.91,1.43,1.43l72.65,81.68c5.2,5.59,4.89,14.34-0.7,19.54c-2.15,2.01-4.89,3.27-7.82,3.61l-71.35-32.68l-73.91,32.68c-7.59-0.87-13.03-7.72-12.17-15.31C99.23,175.19,100.49,172.44,102.5,170.28z',

mounted部分

//设置动态的宽度高度,是为了适配不同屏幕

this.fullWidth = this.windowWidth * 0.58 + 'px'

this.fullWidthwidth = this.windowWidth * 0.65 + 'px'

this.fullHeight = this.windowHeight - 30 + 'px'

//调用并绘制地图

this.createLine(this.loca())

methods部分

//绘制地图的主要方法

createLine(seriesData) {

      document.getElementById('productMap').style.width = this.fullWidthwidth

      document.getElementById('productMap').style.height = this.fullHeight

      let myChart = this.$echarts.init(document.getElementById('productMap'))

      let _this = this

      var option = {

        backgroundColor: 'transparent',

        title: {

          //标题样式

          text: '',

          x: 'center',

          textStyle: {

            fontSize: 18,

            color: 'red',

          },

        },

        tooltip: {

          //这里设置提示框

          trigger: 'item', //数据项图形触发

          backgroundColor: '#fff', //提示框浮层的背景颜色。

          textStyle: {

            borderRadius: '8px',

            border: '1px solid #585858',

            boxShadow: '0px 25px 50px rgba(0, 0, 0, 0.04)',

            fontSize: 9,

            color: '#000',

          },

          //字符串模板(地图): {a}(系列名称),{b}(区域名称),{c}(合并数值),{d}(无)

          formatter: this.formatter,

          // '总用户:{c}<br/>游客:{b}<br/>已登录:{a}<br/>已认证:{e}',

        },

        visualMap: {

          //视觉映射组件

          type: 'piecewise',

          show: false,

          x: 'right',

          y: 'top',

          realtime: false, //拖拽时,是否实时更新

          splitList: [

            { start: 500, end: 1000000 },

            { start: 400, end: 500 },

            { start: 300, end: 400 },

            { start: 200, end: 300 },

            { start: 100, end: 200 },

            { start: 50, end: 100 },

            { start: 10, end: 50 },

            { start: 0, end: 10 },

            { start: 0, end: 0 },

          ],

          color: this.colorlist,//颜色数据,匹配着不同的数值

        },

        legend: {

          data: this.chinaname,//各个省市区注册人数,根据不同地区人数的多少来显示不同的地域颜色

        },

        geo: {

          //地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。

          map: 'china', //配置中国地图

          layoutCenter: ['50%', '49%'],

          // 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域

          layoutSize: this.fullWidth,

          zoom: '1',

          width: this.fullWidthwidth,

          height: this.fullHeight,

          roam: false, //是否开启鼠标缩放和平移漫游

          label: {

            normal: {

              show: true, //显示省份标签

              textStyle: {

                color: '#585858',

              }, //省份标签字体颜色

            },

            emphasis: {

              //对应的鼠标悬浮效果

              show: true,

              textStyle: {

                color: '#000',

              },

            },

          },

          itemStyle: {

            borderWidth: 1, //设置外层边框

            borderColor: '#fff',

            //地图区域的多边形 图形样式

            normal: {

              //是图形在默认状态下的样式

              borderColor: '#fff', //区域边框颜色

              label: {

                show: false, //是否显示标签

                textStyle: {

                  color: 'black',

                },

              },

            },

            zoom: 1.5, //地图缩放比例,默认为1

            emphasis: {

              areaColor: '', //rgba设置透明度0

              // borderColor: '#FF6767',

              borderWidth: '1',

              fontSize: '9',

              //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时

              label: {

                show: false,

              },

            },

          },

          emphasis: {

            areaColor: '', //rgba设置透明度0

            // borderColor: '#FF6767',

            borderWidth: '1',

            fontSize: '9',

            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时

            label: {

              show: false,

            },

          },

          top: '3%', //组件距离容器的距离

          data: this.chinalist,

          icon: 'none', //  设置形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none

          itemWidth: 10, // 设置宽度

          itemHeight: 10, // 设置高度

          itemGap: 20, // 设置间距

        },

        series: seriesData,

       

      }

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option)

      window.addEventListener('resize', function () {

        myChart.resize()

      })

  }    

这个方法主要是为了自定义鼠标移入后根据不同的数据不一样的效果

//鼠标移入悬浮显示的样式的数值

  formatter(a) {

      let _this = this

      let numstring = ''

      if (a.data) {

        let value = a.data.value ? a.data.value : '0'

        if (value.length > 0) {

          if (a.seriesName == '新增登录用户') {

            let name = a.data.name ? a.data.name : '0'

            numstring =

              '<span style="font-size:13px;font-weight:600">' +

              name +

              '</span>' +

              '<br/><span>新增登录</span>'

          } else if (a.seriesName == '新增发布用户') {

            let name = a.data.name ? a.data.name : '0'

            numstring =

              '<span style="font-size:13px;font-weight:600">' +

              name +

              '</span>' +

              '<br/><span>新增发布</span>'

          } else if (a.seriesName == '注册用户') {

            let name = a.data.name ? a.data.name : '0'

            let visitorCount = a.data.visitorCount ? a.data.visitorCount : '0'

            let count = a.data.count ? a.data.count : '0'

            let verifyCount = a.data.verifyCount ? a.data.verifyCount : '0'

            let loginCount = a.data.loginCount ? a.data.loginCount : '0'

            numstring =

              '<div class="formacla"><span style="font-size:13px;font-weight:600">' +

              name +

              '</span>' +

              '<br/>总用户:' +

              count +

              '<br/>游客:' +

              visitorCount +

              '<br/>已登录:' +

              loginCount +

              '<br/>已认证:' +

              verifyCount +

              '</div>'

          } else if (a.seriesName == '新增活跃用户') {

            let name = a.data.name ? a.data.name : '0'

            numstring =

              '<span style="font-size:13px;font-weight:600">' +

              name +

              '</span>' +

              '<br/><span>新增活跃</span>'

          } else {

            let name = a.data.name ? a.data.name : '0'

            let values = a.data.value[2] ? a.data.value[2] : '0'

            values = values / 20

            numstring =

              '<span style="font-size:13px;font-weight:600">' +

              name +

              '</span>' +

              '<br/>在线:' +

              values

          }

        } else {

          let names = a.data.name ? a.data.name : '0'

          if (

            names != undefined &&

            names != 'undefined' &&

            names &&

            (_this.onlineprovince != names || _this.onlinecount == '') &&

            _this.iftrue

          ) {

            _this.onlineprovince = names

            // _this.getOnlineUserCountByProvincelist(a.data.name)

          } else {

          }

          let visitorCount = a.data.visitorCount ? a.data.visitorCount : '0'

          let loginCount = a.data.loginCount ? a.data.loginCount : '0'

          let verifyCount = a.data.verifyCount ? a.data.verifyCount : '0'

          let granaryProvince = a.data.name ? a.data.name : ''

          let purchaseCount = a.data.purchaseCount ? a.data.purchaseCount : '0'

          let saleCount = a.data.saleCount ? a.data.saleCount : '0'

          numstring =

            '<div class="formacla"><span style="font-size:13px;font-weight:600">' +

            names +

            '</span>' +

            '<br/>总用户:' +

            value +

            '<br/>游客:' +

            visitorCount +

            '<br/>已登录:' +

            loginCount +

            '<br/>已认证:' +

            verifyCount +

            '</div>'

        }

      }

      //return numstring

      return '总用户:{c}<br/>游客:{b}<br/>已登录:{a}<br/>已认证:{e}'

    },

此方法是为了设置不同的绘制数据的,如:新增用户,在线用户,注册用户,正在聊天的用户等

loca() {

      let series = []

      let _this = this

      ;[['', this.SHData]].forEach((item, i) => {

        series.push(

          // 正常沟通聊天

          {

            type: 'lines', //用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。

            roam: false, //是否开启鼠标缩放和平移漫游

            zlevel: 1,

            show: false,

            effect: {

              //线特效的配置

              show: true,

              period: 8, //特效动画的时间

              trailLength: 0.7, //特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。

              color: '#FF5353',

              symbolSize: 3, //特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10。

            },

            lineStyle: {

              normal: {

                type: [5, 10],

                color: '#FF5353',

                width: 0,

                curveness: 0.2, //边的曲度,支持从 0 到 1 的值,值越大曲度越大

              },

            },

            data: this.convertData(item[1]), //线数据集。

          },

          {

            type: 'lines',

            roam: false, //是否开启鼠标缩放和平移漫游

            zlevel: 2,

            symbol: ['none', 'none'], //线两端的标记类型,可以是一个数组分别指定两端

            symbolSize: 10,

            width: 0,

            show: false,

            label: false,

            colorBy: '#FF5353',

            effect: {

              show: true,

              period: 8,

              color: '#FF5353',

              trailLength: 0,

              symbol: this.planePath,

              symbolSize: 10,

            },
            lineStyle: {

              color: '#FF5353',

              type: [0, 0],

              opacity: 0,

              curveness: 0.2,

            },

            data: this.convertData(item[1]),

          },

          {

            name: '在线用户',

            // type: 'scatter',

            mapType: 'china',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            data: this.convertDatadot(this.newuserssdata),

            symbolSize: function (val) {

       //这里设置点的大小

              return val[2]*1.1;

            },

            label: false,

            itemStyle: {

              color: '#00B82C',

            },

            rippleEffect: {

              scale: 10,

              brushType: 'stroke',

            },

            emphasis: {

              color: '#00B82C',

              label: {

                show: false,

              },

            },

          },

          {

            name: '注册用户',

            // type: 'scatter',

            mapType: 'china',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            data: this.convertDatadot(this.newregisterdata),

            symbolSize: function (val) {

              return val[2]

            },

            tooltip: {

              show: true,

              //字符串模板(地图): {a}(系列名称),{b}(区域名称),{c}(合并数值),{d}(无)

              formatter: this.formatter,

            },

            label: {

              //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等

              show: false,

            },

            itemStyle: {

              color: '#00B82C',

            },

            rippleEffect: {

              scale: 0,

            },

            emphasis: {

              color: '#00B82C',

              label: {

                //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等

                show: false,

              },

            },

          },

          {

            name: '新增发布用户',

            // type: 'scatter',

            mapType: 'china',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            data: this.convertDatadot(this.newrelesedata),

            encode: {

              value: 2,

            },

            symbolSize: function (val) {

              return val[2] / 9

            },

            label: false,

            rippleEffect: {

              scale: 15,

              brushType: 'stroke',

            },

            itemStyle: {

              color: '#0273f6',

            },

            emphasis: {

              color: '#0273f6',

              label: {

                color: '#ff0',

                show: false,

              },

            },

          },

          {

            name: '新增登录用户',

            // type: 'scatter',

            mapType: 'china',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            // symbol:this.planePath,

            data: this.convertDatadot(this.newuserdata),

            // encode: {

            //   value: 2,

            // },

            symbolSize: function (val) {

              return val[2] / 9

            },

            label: false,

            itemStyle: {

              // color: '#05d5f8',

              color: '#00B82C',

            },

            rippleEffect: {

              scale: 15,

              brushType: 'stroke',

            },
            emphasis: {

              // color: '#05d5f8',

              color: '#00B82C',

              label: {

                show: false,

              },

            },

          },

          {

            name: '新增活跃用户',

            // type: 'scatter',

            mapType: 'china',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            // symbol:this.planePath,

            data: this.convertDatadot(this.newactiondata),

            symbolSize: function (val) {

              return val[2] / 12

            },

            label: false,

            itemStyle: {

              color: '#00B82C',

            },

            rippleEffect: {

              scale: 9,

              brushType: 'stroke',

            },

            emphasis: {

              color: '#00B82C',

              label: {

                show: false,

              },

            },

          },

          {

            name: '',

            type: 'map',

            mapType: 'china',

            width: this.fullWidthwidth,

            height: this.fullHeight,

            roam: false, //是否开启鼠标缩放和平移漫游

            layoutSize: this.fullWidth,

            layoutCenter: ['50%', '49%'],

            zoom: '1',

            type: 'effectScatter', //带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

            coordinateSystem: 'geo', //该系列使用的坐标系

            zlevel: 2,

            rippleEffect: {

              //涟漪特效相关配置

              brushType: 'stroke',

            },

            label: {

              //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等

              show: false,

            },

            emphasis: {

              areaColor: '', //rgba设置透明度0

              borderColor: '#f00',

              borderWidth: '1',

              fontSize: '9',

              //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时

              label: {

                show: false,

              },

            },

            itemStyle: {

              borderWidth: 1, //设置外层边框

              borderColor: '#fff',

              //地图区域的多边形 图形样式

              normal: {

                //是图形在默认状态下的样式

                borderColor: '#fff', //区域边框颜色

                label: {

                  show: false, //是否显示标签

                },

              },

              emphasis: {

                areaColor: '', //rgba设置透明度0

                borderColor: '#FF6767',

                borderWidth: '1',

                fontSize: '9',

                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时

                label: {

                  show: false,

                },

              },

            },

            symbolSize: function (val) {

              //标记的大小

              return val[2] / 8

            },

            top: '3%', //组件距离容器的距离

            icon: 'circle', //  设置形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none

            itemWidth: 10, // 设置宽度

            itemHeight: 10, // 设置高度

            itemGap: 20, // 设置间距

            data: this.chinalist,

          },

          {

            name: '',

            type: 'map',

            mapType: 'china',

            width: this.fullWidthwidth,

            height: this.fullHeight,

            // 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域

            layoutSize: 100,

            layoutCenter: ['50%', '49%'],

            // 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域

            layoutSize: this.fullWidth,

            zoom: '1',

            roam: false, //是否开启鼠标缩放和平移漫游

            showLegendSymbol: false,

            select:{

              itemStyle:{

                backgroundColor:'#fff',

                areaColor: '#fff', //rgba设置透明度0

                borderColor: '#FF6767',

              }

            },

            label: {

              normal: {

                show: true, //显示省份标签

                textStyle: {

                  color: '#585858',

                }, //省份标签字体颜色

              },
              emphasis: {

                //对应的鼠标悬浮效果

                show: true,

                textStyle: {

                  areaColor: 'rgba(255,255,255,0)',

                },

              },

            },

            itemStyle: {

              borderWidth: 1, //设置外层边框

              borderColor: '#fff',

              //地图区域的多边形 图形样式

              normal: {

                //是图形在默认状态下的样式

                borderColor: '#fff', //区域边框颜色

                label: {

                  show: false, //是否显示标签

                  textStyle: {

                    color: 'black',

                  },

                },

              },

              zoom: 1.5, //地图缩放比例,默认为1

              emphasis: {

                backgroundColor:'#fff',

                areaColor: 'rgba(255,255,255,0)',

                borderColor: '#FF6767',

                borderWidth: '1',

                fontSize: '9',

                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时

                label: {

                  show: false,

                },

              },

            },

            top: '3%', //组件距离容器的距离

            data: this.chinalist,

            icon: 'circle', //  设置形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none

            itemWidth: 10, // 设置宽度

            itemHeight: 10, // 设置高度

            itemGap: 20, // 设置间距

          }

        )

      })

      return series

    },

这两个方法是,为了解析数据的经纬度

convertDatadot(data) {

      var res = []

      for (var i = 0; i < data.length; i++) {

        var geoCoord = this.geoCoordMap[data[i].name]

        if (geoCoord) {

          res.push({

            name: data[i].name,

            value: geoCoord.concat(data[i].value),

            count: data[i].count ? data[i].count : '',

            loginCount: data[i].loginCount ? data[i].loginCount : '',

            verifyCount: data[i].verifyCount ? data[i].verifyCount : '',

            visitorCount: data[i].visitorCount ? data[i].visitorCount : '',

            visualMap: false,

          })

        }

      }

      return res

    },

    convertData(data) {

      var res = []

      for (var i = 0; i < data.length; i++) {

        var dataItem = data[i]

        var fromCoord = this.geoCoordMap[dataItem[0].name] //始发地

        var toCoord = this.geoCoordMap[dataItem[1].name] //目的地

        if (fromCoord && toCoord) {

          res.push({

            fromName: dataItem[0].name,

            toName: dataItem[1].name,

            coords: [fromCoord, toCoord], //一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。

          })

        }

      }

      return res

    },

提供chinalist测试数据,以供展示不同的地域颜色,没有需求显示地域差异颜色,不要就行

chinalist:[

    {

        "name": "北京",

        "value": 28,

        "visitorCount": 7,

        "verifyCount": 0,

        "loginCount": 21

    },

    {

        "name": "天津",

        "value": 20,

        "visitorCount": 8,

        "verifyCount": 0,

        "loginCount": 12

    },

    {

        "name": "上海",

        "value": 14,

        "visitorCount": 4,

        "verifyCount": 0,

        "loginCount": 10

    },

    {

        "name": "重庆",

        "value": 23,

        "visitorCount": 7,

        "verifyCount": 3,

        "loginCount": 16

    },

    {

        "name": "河北",

        "value": 376,

        "visitorCount": 96,

        "verifyCount": 21,

        "loginCount": 280

    },

    {

        "name": "河南",

        "value": 342,

        "visitorCount": 109,

        "verifyCount": 22,

        "loginCount": 233

    },

    {

        "name": "云南",

        "value": 25,

        "visitorCount": 5,

        "verifyCount": 2,

        "loginCount": 20

    },

    {

        "name": "辽宁",

        "value": 106,

        "visitorCount": 28,

        "verifyCount": 8,

        "loginCount": 78

    },

    {

        "name": "黑龙江",

        "value": 329,

        "visitorCount": 82,

        "verifyCount": 22,

        "loginCount": 247

    },

    {

        "name": "湖南",

        "value": 32,

        "visitorCount": 10,

        "verifyCount": 3,

        "loginCount": 22

    },

    {

        "name": "安徽",

        "value": 261,

        "visitorCount": 121,

        "verifyCount": 14,

        "loginCount": 140

    },

    {

        "name": "山东",

        "value": 469,

        "visitorCount": 120,

        "verifyCount": 26,

        "loginCount": 349

    },

    {

        "name": "新疆",

        "value": 22,

        "visitorCount": 5,

        "verifyCount": 1,

        "loginCount": 17

    },

    {

        "name": "江苏",

        "value": 158,

        "visitorCount": 57,

        "verifyCount": 12,

        "loginCount": 101

    },

    {

        "name": "浙江",

        "value": 26,

        "visitorCount": 6,

        "verifyCount": 0,

        "loginCount": 20

    },

    {

        "name": "江西",

        "value": 13,

        "visitorCount": 1,

        "verifyCount": 0,

        "loginCount": 12

    },

    {

        "name": "湖北",

        "value": 74,

        "visitorCount": 15,

        "verifyCount": 8,

        "loginCount": 59

    },

    {

        "name": "广西",

        "value": 12,

        "visitorCount": 4,

        "verifyCount": 0,

        "loginCount": 8

    },

    {

        "name": "甘肃",

        "value": 30,

        "visitorCount": 9,

        "verifyCount": 0,

        "loginCount": 21

    },

    {

        "name": "山西",

        "value": 112,

        "visitorCount": 41,

        "verifyCount": 4,

        "loginCount": 71

    },

    {

        "name": "内蒙古",

        "value": 112,

        "visitorCount": 28,

        "verifyCount": 4,

        "loginCount": 84

    },

    {

        "name": "陕西",

        "value": 46,

        "visitorCount": 9,

        "verifyCount": 3,

        "loginCount": 37

    },

    {

        "name": "吉林",

        "value": 129,

        "visitorCount": 36,

        "verifyCount": 14,

        "loginCount": 93

    },

    {

        "name": "福建",

        "value": 11,

        "visitorCount": 6,

        "verifyCount": 0,

        "loginCount": 5

    },

    {

        "name": "贵州",

        "value": 17,

        "visitorCount": 3,

        "verifyCount": 1,

        "loginCount": 14

    },

    {

        "name": "广东",

        "value": 46,

        "visitorCount": 13,

        "verifyCount": 1,

        "loginCount": 33

    },

    {

        "name": "青海",

        "value": 10,

        "visitorCount": 3,

        "verifyCount": 0,

        "loginCount": 7

    },

    {

        "name": "西藏",

        "value": 0

    },

    {

        "name": "四川",

        "value": 29,

        "visitorCount": 6,

        "verifyCount": 2,

        "loginCount": 23

    },

    {

        "name": "宁夏",

        "value": 11,

        "visitorCount": 4,

        "verifyCount": 0,

        "loginCount": 7

    },

    {

        "name": "海南",

        "value": 5,

        "visitorCount": 2,

        "verifyCount": 0,

        "loginCount": 3

    },

    {

        "name": "台湾",

        "value": 1,

        "visitorCount": 0,

        "verifyCount": 0,

        "loginCount": 1

    },

    {

        "name": "香港",

        "value": 0

    },

    {

        "name": "澳门",

        "value": 0

    },

    {

        "name": "南海诸岛",

        "value": 0

    }

]

全国各地区经纬度json 百度网盘提取码: afrn