vue+echarts GL 3d 实现省市区(安徽-合肥市)下钻


在这里插入图片描述

市级
在这里插入图片描述
点击下钻区/县
在这里插入图片描述
具体代码如下:
关于省区市的json数据文件可自行下载这里
我这里只写了两级下钻,如果需要省市区,同理下载对应的json文件,初始化时候的json放最高级

如我这里合肥最高级 this.$echarts.registerMap(‘hefei’, mapname)
这里有个坑,echarts.registerMap必须在初始化
init之前,因为echarts原型对象中才有,init后的对象中是没有的。否则会报错 echarts.registerMap is not a function

下载下来的json数据放在一个文件中

在这里插入图片描述在这里插入图片描述

<template>
    <div id="chart-panel">
    <div id="mapBox"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts/map/js/china'
import 'echarts-gl';
import $ from "jquery"

var anhui = require("../plugins/anhui/anhui.json")
var hefei = require("../plugins/anhui/hefei.json")
var anqin = require("../plugins/anhui/anqin.json")
var bengbu = require("../plugins/anhui/bengbu.json")
var bozhou = require("../plugins/anhui/bozhou.json")
var chizhou = require("../plugins/anhui/chizhou.json")
var chuzhou = require("../plugins/anhui/chuzhou.json")
var fuyang = require("../plugins/anhui/fuyang.json")
var huaibei = require("../plugins/anhui/huaibei.json")
var huainan = require("../plugins/anhui/huainan.json")
var huangshan = require("../plugins/anhui/huangshan.json")
var luan = require("../plugins/anhui/luan.json")
var maanshan = require("../plugins/anhui/maanshan.json")
var suzhou = require("../plugins/anhui/suzhou.json")
var tongling = require("../plugins/anhui/tongning.json")
var wuhu = require("../plugins/anhui/wuhu.json")
var xuancheng = require("../plugins/anhui/xuancheng.json")

var baohe = require("../plugins/hefei/baohe.json")
var changfeng = require("../plugins/hefei/changfeng.json")
var chaohu = require("../plugins/hefei/chaohu.json")
var feidong = require("../plugins/hefei/feidong.json")
var feixi = require("../plugins/hefei/feixi.json")
var lujiang = require("../plugins/hefei/lujiang.json")
var luyang =require ("../plugins/hefei/luyang.json")
var shushan = require("../plugins/hefei/shushan.json")
var yaohai = require("../plugins/hefei/yaohai.json")

var mapname = anhui
    export default {
        data() {
            return {
                mapJson: [
                    {
                        name: "合肥市",
                        json: hefei
                    },
                    {
                        name: "安庆市",
                        json: anqin
                    },
                    {
                        name: "蚌埠市",
                        json: bengbu
                    },
                    {
                        name: "亳州市",
                        json: bozhou
                    },
                    {
                        name: "池州市",
                        json: chizhou
                    },
                    {
                        name: "滁州市",
                        json: ch
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值