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