【Echarts散点地图可视化】

一、vue项目安装echarts

npm install echarts --save

二、视图组件中引入echarts

  import * as echarts from 'echarts';

三、在mounted钩子函数中初始化Echarts

<div id="main"  :style="{width: '100%', height: '100%',fontSize:'100%'}">

mounted() {
          var chartDom = document.getElementById('main');
          this.myChart = echarts.init(chartDom,'light');
          this.loadMap()  //绘制图表
      },

四、引入百度地图相关配置文件及echarts的option配置文件

import option from './utils/citydata.js'
import {loadBMap} from './utils/map.js'

map.js (动态引入百度地图sdk的封装函数，参数ak为在百度开发平台注册得到的 access key）

import BMap from 'echarts/dist/extension/bmap.js'

export function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
        if (typeof BMap !== 'undefined') {
            resolve(BMap)
            return true
        }
        window.onBMapCallback = function() {
            resolve(BMap)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
            'https://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

citydata.js (echarts的options配置）

// 导入所有的省市经纬度坐标
import country from './provincesAndCitys.js'
function option(data){
  const convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = country[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };
  return {
    title: {
      text: '全国靓号分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    bmap: {
      center: [104.114129, 37.550339],
      zoom: 6,
      nameMap:{
        'China' : '中国'
      },
    roam: true,
    mapStyle: {
      styleJson: [
        {
          featureType: 'water',
          elementType: 'all',
          stylers: {
            color: '#d1d1d1'
          }
        },
        {
          featureType: 'land',
          elementType: 'all',
          stylers: {
            color: '#f3f3f3'
          }
        },
        {
          featureType: 'railway',
          elementType: 'all',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'highway',
          elementType: 'all',
          stylers: {
            color: '#fdfdfd'
          }
        },
        {
          featureType: 'highway',
          elementType: 'labels',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'arterial',
          elementType: 'geometry',
          stylers: {
            color: '#fefefe'
          }
        },
        {
          featureType: 'arterial',
          elementType: 'geometry.fill',
          stylers: {
            color: '#fefefe'
          }
        },
        {
          featureType: 'poi',
          elementType: 'all',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'green',
          elementType: 'all',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'subway',
          elementType: 'all',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'manmade',
          elementType: 'all',
          stylers: {
            color: '#d1d1d1'
          }
        },
        {
          featureType: 'local',
          elementType: 'all',
          stylers: {
            color: '#d1d1d1'
          }
        },
        {
          featureType: 'arterial',
          elementType: 'labels',
          stylers: {
            visibility: 'off'
          }
        },
        {
          featureType: 'boundary',
          elementType: 'all',
          stylers: {
            color: '#fefefe'
          }
        },
        {
          featureType: 'building',
          elementType: 'all',
          stylers: {
            color: '#d1d1d1'
          }
        },
        {
          featureType: 'label',
          elementType: 'labels.text.fill',
          stylers: {
            color: '#999999'
          }
        }
      ]
    }

  },
  series: [
    {
      name: '靓号数量',
      type: 'scatter',
      coordinateSystem: 'bmap',
      data: convertData(data),
      symbolSize: function (val) {
       if(val[2] < 1000){
         return 10
       }
       else if(val[2] > 1000 && val[2] < 3000){
         return 20
       }
       else {
         return 30
       }
      },
      encode: {
        value: 2
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: false
      },
      emphasis: {
        label: {
          show: true
        },
        scale:true
      }
    },
    {
      name: 'Top10',
      type: 'effectScatter',
      coordinateSystem: 'bmap',
      data: convertData(
        data
          .sort(function (a, b) {
            return b.value - a.value;
          })
          .slice(0, 10)
      ),
      symbolSize: function (val) {

        if(val[2] < 20000){
          return val[2] / 250
        }else{
          return val[2] / 820
        }
      },
      encode: {
        value: 2
      },
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: true
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: '#333'
      },
      emphasis: {
        scale: true
      },
      zlevel: 1
    }
  ],

};
}

export default option

provinceAndCitys.js (全国所有省、市的经纬坐标）
下载地址：
链接: https://pan.baidu.com/s/1N8cWnfDJSbL7HIcyM1b2FA 提取码: qvlh

methods:{
// 配置图表option
       drawChart(){
          option && this.myChart.setOption({
            ...option(this.data)
          },true)
       },
  // 绘制图表
      loadMap(){
        this.$nextTick(()=>{
          loadBMap("UxtAMVR9pdiUt99IaA0h9Z9lKQxUDC87").then(()=>{
            this.drawChart()
          })
        })
      },
}

loadMap方法传入的参数为你在百度开发平台注册得到的 access key

五、当视图组件销毁的时候，销毁echarts

 beforeUnmount() {
        this.myChart.dispose()
      },

最终效果：