echarts三维地图的实现

目标需要实现上图所示的新疆区域

1、首先需要下载echarts与echarts-gl依赖

npm install echarts --save
npm install echarts-gl -- save

2、相关vue文件中引入echarts与新疆省界的geojson

import * as echarts from 'echarts';
import xinjiang from "./xinjiang.json";

3、定义div

<div id="main"></div>

4、最终实现

var option =  {
    geo: [{
        map: 'JS',
        zlevel: 5,
        label: {
          show: true,
          textStyle: {
            color: '#eee',
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          color: '#38BA99', // 背景
          borderWidth: '1', // 边框宽度
          borderColor: '#67EECE', // 边框颜色
        }
      },
      {
        map: 'JS',
        top: '12%',
        itemStyle: {
          color: '#28543E', // 背景
          borderColor: '#46D2AE', // 边框颜色
          shadowColor: '#679380',  // 外部阴影 
          shadowBlur: '65'
        }
    }
]
// 地图
let chart = echarts.init(document.getElementById('main'));
echarts.registerMap('JS', xinjiang);
chart.setOption(option);