十七 ECharts 地图

口扣技术交流 q u n : 894441210

合作vx：xuexiv5876

← 百度地图 + vue

使用 ECharts 绘制地图

安装 vue-echarts 和 echarts

npm i -S vue-echarts echarts

注册组件

import VueECharts from 'vue-echarts'
import ECharts from 'echarts'

Vue.prototype.$echarts = ECharts
Vue.component('vue-echarts', VueECharts)

修改默认样式

.echarts {
  width: 100%;
  height: 100%;
}

只显示地图

注意：一定要引入 echarts 的 bmap 扩展，否则将不能识别 bmap 属性

import 'echarts/extension/bmap/bmap'

自定义 map 样式

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'
      }
    }]
}

绘制散点

准备数据源

const testPoint = [{
  name: '海门',
  value: [121.15, 31.89, 80]
}, {
  name: '南京',
  value: [118.78, 32.04, 100]
}]

绘制散点图

series: [{
  type: 'scatter',
  coordinateSystem: 'bmap',
  data: testPoint,
  symbolSize: function(val) {
    return val[2] / 10
  },
  itemStyle: {
    color: 'purple'
  }
}]

完整案例

WebGL→