基于vue的echarts北京3D地图

3D地图图表效果如下:

第一步：下载echarts

npm install echarts --save-dev //安装echarts

npm install echarts-gl //安装3D，如不需要3D不需要下载此项

第二步：在main.js中全局引入

import echarts from 'echarts' //
Vue.prototype.$echarts = echarts

import echartsGL from 'echarts-gl' // 引入echarts
Vue.prototype.$echartsGL = echartsGL // 引入组件（将echarts注册为全局）

第三步，建立echarts组件

<template>
  <div id="app">
    <div class="mains">
      <div
      id="chartmainbar"
      ref="chart"
      style="width:880px; height:800px;"
    ></div>
    </div>
  </div>
</template>

<script>
import beijing from '../../../../node_modules/echarts/map/js/province/beijing' 引入北京地图数据
export default {
  mounted() {
      this.echartschange()
  },
  methods: {
    echartschange() {
        var city = [
      { name: '延庆区', value: 31.4, lng: 115.981186, lat: 40.462706 },
      { name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
      { name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
      { name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
      { name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
      { name: '平谷区', value: 42.3, lng: 117.128025, lat: 40.147115 },
      { name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
      { name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
      { name: '石景山区', value: 65.2, lng: 116.229612, lat: 39.912017 },
      { name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
      { name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
      { name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
      { name: '通州区', value: 137.8, lng: 116.662928, lat: 39.917001 },
      { name: '大兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
      { name: '房山区', value: 104.6, lng: 116.149892, lat: 39.755039 },
      { name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }
    ]
     let chart = this.$echarts.init(
           this.$refs.chart
          )
      var min = 0,
        max = 300
      var option = {
        tooltip: {
          formatter: function(params) {
            var content = '',
              content = params.name + params.value
            return content
          }
        },
        backgroundColor: '#fff',
        visualMap: {
          show: false,
          min: min,
          max: max,
          inRange: {
            color: ['#e0ffff', '#006eed']
            //  color: ['red', 'pink']
          },
          calculable: true
        },
        series: {
          name: '北京',
          type: 'map3D',
          map: '北京',
          data: city,

          regionHeight: 2,
          boxWidth: 70,
          //boxHeight:50,
          boxDepth: 50,
          top: '-10%',
          //left:'10%',

          label: {
            show: true,
            formatter: function(params) {
              var content = '',
                content = params.name
              return content
            },
            textStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: 12,
              backgroundColor: 'rgba(0,23,11,0)'
            },

            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              textStyle: { color: '#f00' }
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 0.4
            }, //阴影效果
            emphasis: {
              color: 'rgb(255,255,255)'
            }
          },

          viewControl: {
            autoRotate: false,
            distance: 70
          }
        }
      }
      chart.setOption(option)
      chart.on('click', function(params) {
        var cout = params.data.name
        console.log(params)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>

总结：总体来说很简单，如果调用其他省份就引入其他省份的js,如果是中国地图就引入china.js，如果是世界地图就引入world.js就可以了