echarts 全国各省市3D图

实现步骤如下
1，npm安装组件

npm install echarts
npm install echarts-gl

2, 下载所显示省市区的json数据

下载地址如下 点击跳转

3，依次引入

  import echarts from 'echarts';
  import  'echarts-gl';
  //这个json文件，通过跳转地址获取
  import shanJson from '../../assets/mockData/shanxi.json';

4，echarts注册地图

 echarts.registerMap('shanxi', shanJson);

5，剩下的就是配制option,以及实例化组件。

  let initEcharts = echarts.init(me.$refs.container);
  initEcharts.setOption(me.option);

代码如下

<template>
	<div>
    <p>geoJSON获取地址   <a :href="href">跳转地址</a></p>
    <div id="echarts" ref="container"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
  import  'echarts-gl';
  //这个json文件，通过跳转地址获取
  import shanJson from '../../assets/mockData/shanxi.json';
	export default {
		data() {
			return {
        href:' http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4',
				option: {}

			}
		},
		methods: {
			init() {
				let me = this;

        var barData = [
          {
            "name": "太原市",
            "value": [
              112.48699,
              37.94036,
              100
            ]
          }
        ];

        echarts.registerMap('shanxi', shanJson);

        me.option = {
          title: {
            text: '山西省3D地图',
            left: 'center',
            top: 20
          },
          legend:{
            show:true,
            right:10,
            top:10
          },
          tooltip:{
            show:true,
            formatter:function(params){
              let value = params.data.value;
              return params.seriesName + ':'+ value[2];
            }
          },
          geo3D: {
            map: 'shanxi',
            boxWidth:50,
            boxHeight:6,
            boxDepth:90,
            // environment: 'auto',
            //鼠标旋转，缩放等视觉设置
            viewControl: {
              // center: [-10, 0, 10]
            },
            //光源的设置
            light: {
              main: {
                intensity: 1,
                shadow: true,
                alpha:150,
                beta: 70
              },
              ambient: {
                intensity: 0
              }
            },
            //地面的背景颜色
            groundPlane: {
              show: true,
              color:'transparent'
            },
            //特效设置
            postEffect: {
              enable:false
            },
            //标签样式
            label: {
              show:true,
              formatter:function(params){
                var content='',
                  content=params.name;
                return content;
              },
              distance:0,
              textStyle:{
                color:'#ffffff',
                fontWeight : 'normal',
                fontSize :12,
                backgroundColor: 'rgba(255,255,255,0)'
              },
            },
            //地图样式 ===》地图各省市区的颜色，边界
            itemStyle: {
              color:'#73a4ff',
              borderColor: 'rgb(62,215,213)',
              borderWidth: 1
            },
            //鼠标 hover 高亮时图形和标签的样式
            emphasis:{
              label:{
                show:true,
                distance:10
              },
              itemStyle: {
                color:'#ffa8cc',
              }
            }


          },

          series: [
            {
              type: 'bar3D',
              name:'某某柱状图',
              coordinateSystem: 'geo3D',
              itemStyle: {
                color: 'red',
                opacity: 1
              },
              emphasis:{
                label:{
                  show:false,
                }
              },
              data: barData,
            }
          ]
        };

        let initEcharts = echarts.init(me.$refs.container);
        initEcharts.setOption(me.option);
			}

		},
		created() {

		},
		mounted() {
			this.$nextTick(() => {
				this.init();
			})
		}
	}
</script>

<style scoped>
	#echarts {
		width: 100%;
		height: 500px;
	}
</style>

效果如下

参考地址 https://www.echartsjs.com/zh/option-gl.html#geo3D.light.ambient