echarts三级穿透地图（江西省）

已于 2023-02-22 16:11:22 修改
阅读量991 收藏 5
点赞数 1
文章标签： json javascript Powered by 金山文档
于 2023-02-22 16:04:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39643110/article/details/129164621
版权 
<script>
    'use strict';
    var VueMoudle = new Vue({
        el: '#jqts',
        data() {
            return {
                mapLastName: '',//上一步地图显示内容
                mapName: '',//地图默认展示层级
                mapCity: {//中文名与json 文件对应表
                    "江西省": "jiangxi",
                    "抚州市": "fuzhou",
                    "赣州市": "ganzhou",
                    "吉安市": "jian",
                    "景德镇市": "jingdezhen",
                    "九江市": "jiujiang",
                    "南昌市": "nanchang",
                    "萍乡市": "pingxiang",
                    "上饶市": "shangrao",
                    "新余市": "xinyu",
                    "宜春市": "yichun",
                    "鹰潭市": "yingtan",

                    //市区级
                    "婺源县": "shangrao_wyx",
                    "鄱阳县": "shangrao_pyx",
                    "玉山县": "shangrao_yushanxian",
                    "余干县": "shangrao_ygx",
                    "广丰区": "shangrao_gfq",
                    "弋阳县": "shangrao_yyx",
                    "万年县": "shangrao_wnx",
                    "德兴市": "shangrao_dxs",
                    "广信区": "shangrao_gxq",
                    "横峰县": "shangrao_hfx",
                    "信州区": "shangrao_xzq",
                    "铅山县": "shangrao_yzx",

                    '修水县': "jiujiang_xsx",
                    '武宁县': "jiujiang_wnx",
                    '永修县': "jiujiang_yxx",
                    '共青城市': "jiujiang_gqcs",
                    '瑞昌市': "jiujiang_rcs",
                    '德安县': "jiujiang_dax",
                    '柴桑区': "jiujiang_csq",
                    '庐山市': "jiujiang_lss",
                    '濂溪区': "jiujiang_lxq",
                    '彭泽县': "jiujiang_pzx",
                    '都昌县': "jiujiang_dcx",
                    '湖口县': "jiujiang_hkx",
                    '浔阳区': "jiujiang_xyq",


                    "贵溪市": "yingtan_guixi",
                    "月湖区": "yingtan_yuehu",
                    "余江区": "yingtan_yujiang",

                    "上栗县": "pingxiang_shangli",
                    "安源区": "pingxiang_anyuan",
                    "莲花县": "pingxiang_lianhua",
                    "芦溪县": "pingxiang_luxi",
                    "湘东区": "pingxiang_xiangdong",

                    "浮梁县": "jingdezhen_fuliang",
                    "珠山区": "jingdezhen_zhushan",
                    "昌江区": "jingdezhen_changjiang",
                    "乐平市": "jingdezhen_leping",

                    '丰城市': "yichun_fcs",
                    '高安市': "yichun_gas",
                    '樟树市': "yichun_zss",
                    '铜鼓县': "yichun_tgx",
                    '万载县': "yichun_wzx",
                    '奉新县': "yichun_fxx",
                    '上高县': "yichun_sgx",
                    '靖安县': "yichun_jax",
                    '宜丰县': "yichun_yfx",
                    '袁州区': "yichun_yzq",

                    '安义县': "nanchang_ayx",
                    '东湖区': "nanchang_dhq",
                    '红谷滩区': "nanchang_hgtq",
                    '进贤县': "nanchang_jxx",
                    '南昌县': "nanchang_ncx",
                    '青山湖区': "nanchang_qshq",
                    '青云谱区': "nanchang_qypq",
                    '西湖区': "nanchang_xhq",
                    '新建区': "nanchang_xjq",

                    "分宜县": "xinyu_fyx",
                    "渝水区": "xinyu_ysq",

                    '临川区': "fuzhou_lcq",
                    '南丰县': "fuzhou_nfx",
                    '东乡区': "fuzhou_dxq",
                    '南城县': "fuzhou_ncx",
                    '广昌县': "fuzhou_gcx",
                    '金溪县': "fuzhou_jxx",
                    '资溪县': "fuzhou_zxx",
                    '乐安县': "fuzhou_lax",
                    '黎川县': "fuzhou_lcx",
                    '崇仁县': "fuzhou_crx",
                    '宜黄县': "fuzhou_yhx",

                    '泰和县': "jian_thx",
                    '井冈山市': "jian_jgss",
                    '遂川县': "jian_scx",
                    '永丰县': "jian_yfx",
                    '新干县': "jian_xgx",
                    '永新县': "jian_yxx",
                    '万安县': "jian_wax",
                    '安福县': "jian_afx",
                    '吉水县': "jian_jsx",
                    '吉安县': "jian_jax",
                    '峡江县': "jian_xjx",
                    '吉州区': "jian_jzq",
                    '青原区': "jian_qyq",

                    '瑞金市': "ganzhou_rjs",
                    '于都县': "ganzhou_ydx",
                    '兴国县': "ganzhou_xgx",
                    '信丰区': "ganzhou_xfq",
                    '南康区': "ganzhou_nkq",
                    '石城县': "ganzhou_scx",
                    '宁都县': "ganzhou_ndx",
                    '寻乌县': "ganzhou_xwx",
                    '龙南市': "ganzhou_lns",
                    '全南县': "ganzhou_qnx",
                    '安远县': "ganzhou_ayx",
                    '会昌县': "ganzhou_hcx",
                    '大余县': "ganzhou_dyx",
                    '崇义县': "ganzhou_cyx",
                    '定南县': "ganzhou_dnx",
                    '赣县区': "ganzhou_gxq",
                    '上犹县': "ganzhou_syx",
                    '章贡区': "ganzhou_zgq",
                },
                isFirstLoad: true,//是否是第一次初始化加载
            }
        },
        methods: {
         
            initMap(area, data) {
                let chart = echarts.init(document.getElementById('mapContainer'));
                chart.clear();
                area = this.mapCity[area]
                let option = {
                    tooltip: {
                        show: false
                    },
                    geo: [
                        {
                            show: true,
                            map: area,
                            aspectScale: 1,
                            zoom: 1.08,
                            // roam: true,
                            itemStyle: {
                                areaColor: '#0a3b8a',
                                borderColor: 'rgba(129,186,253,0.4)'
                            },
                            // scaleLimit: { //滚轮缩放的极限控制
                            //     min: 0.5,
                            //     max: 6
                            // },
                            emphasis: {
                                disabled: true
                            }
                        },
                        {
                            show: true,
                            map: area,
                            aspectScale: 1,
                            zoom: 1.1,
                            // roam: true,
                            itemStyle: {
                                areaColor: '#1a3b8a',
                                borderColor: '#81bafd',
                            },
                            // scaleLimit: { //滚轮缩放的极限控制
                            //     min: 0.5,
                            //     max: 6
                            // },
                            label: {
                                show: true,
                                formatter(area) {
                                    let value = data.filter(item => {
                                        return item.name === area.name;
                                    })[0].value;
                                    var className;
                                    if (value > 500) {
                                        className = 'style1'
                                    } else if (value > 200) {
                                        className = 'style2'
                                    } else if (value > 100) {
                                        className = 'style3'
                                    } else {
                                        className = 'style4'
                                    }
                                    return `{${className}|${value}}\n{name|${area.name}}`;
                                },
                                rich: {
                                    style1: {
                                        backgroundColor: {
                                            image: "./../images/public/map_flag_red_bg.png"
                                        },
                                        width: 51,
                                        height: 43,
                                        align: 'center',
                                        fontSize: '16px',
                                        fontFamily: 'dinBold',
                                        fontWeight: 'bold',
                                        color: '#333333',
                                        verticalAlign: 'top',
                                        padding: [-10, 0, 0, 4],
                                    },
                                    style2: {
                                        backgroundColor: {
                                            image: "./../images/public/map_flag_yellow_bg.png"
                                        },
                                        width: 51,
                                        height: 43,
                                        align: 'center',
                                        fontSize: '16px',
                                        fontFamily: 'dinBold',
                                        fontWeight: 'bold',
                                        color: '#333333',
                                        verticalAlign: 'top',
                                        padding: [-10, 0, 0, 4],
                                    },
                                    style3: {
                                        backgroundColor: {
                                            image: "./../images/public/map_flag_green_bg.png"
                                        },
                                        width: 51,
                                        height: 43,
                                        align: 'center',
                                        fontSize: '16px',
                                        fontFamily: 'dinBold',
                                        fontWeight: 'bold',
                                        color: '#333333',
                                        verticalAlign: 'top',
                                        padding: [-10, 0, 0, 4],
                                    },
                                    style4: {
                                        backgroundColor: {
                                            image: "./../images/public/map_flag_blue_bg.png"
                                        },
                                        width: 51,
                                        height: 43,
                                        align: 'center',
                                        fontSize: '16px',
                                        fontFamily: 'dinBold',
                                        fontWeight: 'bold',
                                        color: '#333333',
                                        verticalAlign: 'top',
                                        padding: [-10, 0, 0, 4],
                                    },
                                    name: {
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        color: '#fff',
                                        fontFamily: 'PingFangSC-Medium',
                                        padding: [6, 0, 0, 0],
                                    },
                                },

                            }
                            ,
                            emphasis: {
                                itemStyle: {
                                    areaColor: '#0a256d',
                                    borderColor: '#81bafd',
                                },
                                label: {
                                    color: '#fff',
                                },
                            },
                        }

                    ],
                    series: [
                        {
                            nameMap: {
                                'jiangxi': '江西省'
                            },
                            silent: true, //禁用地图的hover事件
                            top: 20,
                            type: 'map',
                            name: '危险驾驶案件数',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            data: data
                        }
                    ],

                }
                chart.clear();
                chart.setOption(option, true);
            },
            getData(area, option) {
                $.getJSON('../js/json/' + this.mapCity[area] + '.json', (data) => {
                    let areaCode = data.features[0].properties.parent.adcode;
                    axios.get('/zfdsj-web/stWxjsAqts/queryGdqaqfbqkData', {
                        params: {
                            option: option,
                            conditionStartTime: this.conditionStartTime,
                            conditionEndTime: this.conditionEndTime,
                            areaCode: areaCode
                        }
                    }).then(res => {
                        let result = res.data.data;
                        //TODO获取地区数据
                        let newCity = []
                        for (let i = 0, len = data.features.length; i < len; i++) {
                            let city = result.find(item => item.name == data.features[i].properties.name);
                            let value = 0;
                            if (city != undefined) {
                                value = city.value;
                            }
                            newCity.push({
                                //获取地图数据
                                name: data.features[i].properties.name,
                                //此处虚拟数据，应从后台服务获取数据
                                value: value
                            });
                        }
                        echarts.registerMap(this.mapCity[area], data);
                        this.initMap(area, newCity);
                    }).catch(err => console.log(err.message));
                });
            }
            ,
            mapReturn() {
                //第二层
                if (this.mapLastName === '江西省') {
                    this.getData(this.mapLastName, this.ajfbValue);
                    this.mapName = this.mapLastName;
                    this.mapLastName = '';
                } else {//第三层
                    this.getData(this.mapLastName, this.ajfbValue);
                    this.mapName = this.mapLastName;
                    //如果初始是省级 就能再显示上一层
                    if (this.allCityList[window.top.areaCode].name === '江西省') {
                        this.mapLastName = '江西省';
                    } else {//否则 为市级不允许再退一层
                        this.mapLastName = '';
                    }
                }

            }
        }
        ,
        mounted() {
            //根据账号展示code选择不同 下属区域
            this.cityList = this.allCityList[window.top.areaCode].children;
            //***************  地图  ******************//
            let chart = echarts.init(document.getElementById('mapContainer'));
            this.getData(this.allCityList[window.top.areaCode].name, this.ajfbValue);
            this.isFirstLoad = false;
            this.mapName = this.allCityList[window.top.areaCode].name;
            //单击穿透事件
            chart.on('click', (params) => {
                if (params.name === this.mapName) {
                    return;
                }
                if (params.name in this.mapCity) {
                    this.getData(params.name, this.ajfbValue);
                    this.mapLastName = this.mapName;
                    this.mapName = params.name;
                }
            });
        }
    });
</script>

地图JSON数据

shuimoY
关注
Echarts中国地图三级钻取
主要分享大数据相关的知识，如Spark、Hudi
11-27 9566
我的原创地址：https://dongkelun.com/2018/11/27/echartsChinaMap/ 前言 最近其实一直在用Echarts写前端，之前也想过总结一下Echarts的用法，但是官网的例子已经很全了。写这篇博客是因为Echarts官网把很多地图的例子都去掉了，且不能下载地图Json的数据，而相关的博客又很少，搜到两个，但是不很符合自己的想法，所以就想自己实现总结一下最基本的......
江西省echarts地图资源
12-30
江西省echarts地图资源
echarts 江西省 矢量地图
02-26
ECharts 之前提供下载的矢量地图数据来自第三方，但是不提供下载了,这儿有全部的矢量地图,供大家使用 echarts 江西省 矢量地图
Echarts 绘制地图（中国、省市、区县）
最新发布
富朝阳的博客
08-05 6186
Echarts 绘制地图（中国、省市、区县）
echarts 江西省地图所需的js jiangxi.js
07-27
echarts 江西省地图所需的js jiangxi.js
Echarts地图省市县穿透及区域居中显示
Geek-Haoyu
07-04 438
抓紧收藏！开盖即食！
spring结合Echarts实现中国地图大区、省、市、区/县的穿透
qq_32518481的博客
07-07 1495
ECHARTS实现区域、省份、市、区县的数据穿透前言一、Echarts是什么？二、实现效果1.初始化地图展示2.钻取三、实现步骤1.引入JS库2.初始化HTML标签、存放Echarts图3.初始化配置文件3.获取地图数据4.合并省份图层5.注册地图6.实现地图点击向下钻取 前言 目前Echarts官网有很多关于省市区3级穿透的案例，但是很少有区域、省、市、区4级穿透的案例，本案例采用SpringMVC结合JSP、Echarts、本地化地图JSON完成（本地json可替换成高德地区获取区划的API
3D地图展示+二级穿透效果 + 全国省市县Json文件
01-15
本资源包提供的"3D地图展示+二级穿透效果 + 全国省市县Json文件"是针对这一需求的一个实用案例，主要涉及到以下几个关键知识点： 1. **ECharts地图组件**：ECharts 是一个基于 JavaScript 的开源数据可视化库，它...
实现echarts地图省市县三级下钻
03-08
基于html 或可在vue下的实现页面展示效果，可直接放入操作软件上，更改路径便可实现效果，如样式需要更改也可在对应位置进行更改
echarts3-中国省市县级三级地图json（含使用demo
08-23
在“echarts3-中国省市县级三级地图json（含使用demo”这个压缩包中，我们主要关注的是ECharts 3在中国地图的省、市、县三级展示及其交互功能的实现。 首先，该压缩包包含的“省级地图”、“市级地图”和“县级地图...
echarts地图导航飞线与层级穿透
好好学习
04-25 2966
echartsjs地图导航飞线与层级穿透
echarts三级联动地图
11-30
该插件是我写的“echarts地图三级联动”中用到的，请谨慎下载。
echarts省市县三级地图
12-06
echarts，省市县三级地图Json 点击省切换到市级地图县级地图
echarts3-中国省市县级三级地图json
08-27
1.含省、市、县级json数据 2.内含使用demo，点击省切换到市级地图、点击市级地图切换到县级地图
echarts全国省市三级地图联动
12-14
echarts全国省市三级地图联动，点击中国地图切换到省的地图，点击省的地图切换到是的地图
echarts3-中国省市区县级三级地图json（含使用demo）
01-03
1.含省、市、县级json数据 2.内含使用demo，点击省切换到市级地图、点击市级地图切换到县级地图
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷
01-14
ECharts是百度推出的一个开源的JavaScript图表库，它支持多种图表类型，包括柱状图、折线图、饼图以及地图等，而且能够实现丰富的交互效果。在本项目中，我们将讨论如何利用ECharts和HTML5来制作一个3D炫酷的世界...
echarts 中国地图+穿透
古大帅哥的博客
07-08 2231
上两周需要做个地图，去echarts官网看了下，说的有点模糊，下载的模板又打不开，自己摸索了几天，前端技术较渣，大概弄了个半成品。如图 单击穿透 需要下载各地的地图文件。json或者js之类的，这里我删除了自己项目的代码，搞了些静态数据大概搞个demo，方面以后自己用，需要的朋友也可以下载使用 提取码: puy6 下载好源码，需要配合vscode使用 修改这里传入的参数就可以用了 function getData(area) { console.log(area) $
echarts地图三级联动
IT_xiaocao的博客
11-30 5858
全国地图 var province = [ {name: '北京', selected:false}, {name: '天津', selected:false}, {name: '上海', selected:false}, {name: '重庆
echarts 穿透
08-24
echarts穿透是指当鼠标悬停在echarts图表上时，图表的tooltip能够穿透至弹窗或选择器之上。根据引用中提到的解决方案，可以使用CSS样式来盖住tooltip所在的元素，或者在弹窗打开时通过JavaScript来隐藏这个元素。在解决方案2中，使用了以下代码来隐藏这个元素： ```javascript const doms = document.querySelectorAll('.echarts > div:nth-child(2)'); doms?.forEach((dom) => { dom.style.visibility = 'hidden'; dom.style.opacity = '0'; }); ``` 通过以上解决方案，可以成功解决echarts穿透的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts在移动端使用tooltip样式穿透](https://blog.csdn.net/qq_39331257/article/details/119207106)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts 中国地图+穿透](https://blog.csdn.net/qq_38333529/article/details/118578847)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值