echarts省级地图展示(包含3D地图)

1、npm i echarts --save

// main.js
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

2、下载省级地图json(下载地址)

3、当前页面引入JSON

import chongqing from "./assets/chongqing.json"

4、使用

<template>
	<div id="mychart" style="width: 900px;height: 900px;"></div>
</template>
mounted() {
     this.$nextTick(()=>{
       this.mychart = this.$echarts.init(document.getElementById("mychart"));
       this.$echarts.registerMap("chosenMap", chongqing );
       let option = {
         backgroundColor: "#404a59",
         title: {
           text: "重庆",
           top: 25,
           left: "center",
           textStyle: {
             fontSize: 25,
             fontWeight: 650,
             color: "#fff",
           },
         },
         tooltip: {
           trigger: "item",
           formatter: function(val) {
             return "人数: 人";
           },
         },
         toolbox: {
           show: true,
           orient: "vertical",
           left: "right",
           top: "center",
           feature: {
             dataView: {
               readOnly: false
             },
             restore: {},
             saveAsImage: {},
           },
         },
         series: [{
           name: '重庆',
           type: "map",   //3D地图：map3D
           mapType: "chosenMap", // 自定义扩展图表类型
           label: {
             show: true,
           },
           itemStyle: {
             normal: {
               areaColor: "#323c48",
               borderColor: "#111",
               label: {
                 show: true,
                 color: "white",
               },
             },
             emphasis: {
               areaColor: "#2a333d",
               label: {
                 show: true,
                 color: "white",
               },
             },
           },
           roam: true,
           top: 70,
           label: {
             show: true, // 是否显示对应地名
           },
           data: [{
             name: "江津区",
             itemStyle: { // 单个区域的样式设置
               color: '#0489d6',
               areaColor: "blue",
               opacity: 1,
               borderWidth: 0.4,
               borderColor: 'red'
             },
             label: {
               show: true, //是否显示高亮
               textStyle: {
                 color: '#fff', //高亮文字颜色
               }
             },
           }]
         }, ],
       };
       this.mychart.on("click", function(params) {
         console.log(params);
       });
       this.mychart.setOption(option);
     })
    },

5、3D地图配置

1. 下载echarts-gl ：npm i echarts-gl --save
2. 当前页面引入

import “echarts-gl”

3. 参数配置

series: [
    {
        type: 'map3D',           
        name: '重庆', 
        selectedMode:"single",//地图高亮单选
        boxDepth:90,//地图倾斜度
        regionHeight:8,//地图高度
        map: '重庆',
        viewControl:{
            distance:150,//地图视角 控制初始大小
            rotateSensitivity:0,//禁止旋转
            zoomSensitivity:0,//禁止缩放
        }
  }]