image.png

安装依赖,并引入

npm install echarts -S
npm install echarts-g -S

在main.js
import * as echarts from 'echarts/core';
import 'echarts-gl';

使用

import jsonData from '@/assets/data/fs.json'
  const initChar = ()=>{
      echarts.registerMap('nh', jsonData);
      var chart = echarts.init(document.getElementById('map1'));
      chart.setOption({
        // globe:{    // 地球组件
        //   environment: '#000'
        // },
        // geo:{     // 地理坐标系组件【需要下载地图】
        //   show:true,
        //   itemStyle:{
        //     borderWidth: 4,
        //     borderColor: "#ff0"
        //   }
        // },
        // xAxis3D:{    // 坐标系
        //   show:true
        // },

        series: [{
          type: 'map3D',            // 3D地图
          map: 'nh',                // registerMap的key
          environment: '#020E24',      // 背景色
          groundPlane:{            // 显示地面
            show:true,
          },
          instancing:true,          // 合并geometry，提高效率
          itemStyle:{               // 图形的样式
            color:'#0C3972',
            borderWidth:3,
            opacity:0.5,
            borderColor:'#3DB4DC'
          },
          emphasis:{                // 鼠标悬浮的样式
            label:{
              show:true,
              // distance:30,
              formatter:(params)=>{   //标签格式化
                return params.name
              },
              textStyle:{
                color:'#fff'
              }
            }
          },
          shading:'lambert'
        }]
      });
    }