vue+echarts GL 3d 实现省市区安徽-合肥市下钻
IF YOU～
帮助1人
省
市级
点击下钻区/县
具体代码如下：
关于省区市的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: chuzhou
},
{
name: "阜阳市",
json: fuyang
},
{
name: "淮北市",
json: huaibei
},
{
name: "淮南市",
json: huainan
},
{
name: "黄山市",
json: huangshan
},
{
name: "六安市",
json: luan
},
{
name: "马鞍山市",
json: maanshan
}
,
{
name: "宿州市",
json: suzhou
},
{
name: "铜陵市",
json: tongling
},
{
name: "马鞍山市",
json: maanshan
},
{
name: "芜湖市",
json: wuhu
},
{
name: "宣城市",
json: xuancheng
},
{
name: "包河区",
json: baohe
},
{
name: "长丰县",
json: changfeng
},
{
name: "巢湖市",
json: chaohu
},
{
name: "肥东县",
json: feidong
},
{
name: "肥西县",
json: feixi
},
{
name: "庐江县",
json: lujiang
},
{
name: "庐阳区",
json: luyang
},
{
name: "蜀山区",
json: shushan
},
{
name: "瑶海区",
json: yaohai
},
],
mapDate:[
{
name: '合肥市',
value: [117.315358,31.86961, 29999]
},
{
name: '安庆市',
value: [117.044965,30.506375, 29999]
},
{
name: '蚌埠市',
value: [117.382312,32.950452, 29999]
},
{
name: '亳州市',
value: [115.781214,33.869284, 29999]
},
{
name: '池州市',
value: [117.488342,30.657378, 29999]
},
{
name: '滁州市',
value: [118.316475,32.303797, 29999]
},
{
name: '阜阳市',
value: [115.813914,32.891238, 29999]
},
{
name: '淮北市',
value: [116.833925,33.991218, 29999]
},
{
name: '淮南市',
value: [117.052927,32.632066, 29999]
},
{
name: '黄山市',
value: [118.317354,29.709186, 29999]
},
{
name: '六安市',
value: [116.503288,31.754491, 29999]
},
{
name: '马鞍山市',
value: [118.511308,31.69902, 29999]
},
{
name: '宿州市',
value: [116.983309,33.633853, 29999]
},
{
name: '铜陵市',
value: [117.816167,30.927613, 29999]
},
{
name: '芜湖市',
value: [118.376343,31.32559, 29999]
},
{
name: '宣城市',
value: [118.758412,30.946003, 29999]
},
{
name: '包河区',
value: [117.285751,31.82956, 29999]
},
{
name: '长丰县',
value: [117.164699,32.478548, 29999]
},
{
name: '巢湖市',
value: [117.874155,31.600518, 29999]
},
{
name: '肥东县',
value: [117.463222,31.883992, 29999]
},
{
name: '肥西县',
value: [117.166118,31.719646, 29999]
},
{
name: '庐江县',
value: [117.289844,31.251488, 29999]
},
{
name: '庐阳区',
value: [117.283776,31.869011, 29999]
},
{
name: '蜀山区',
value: [117.262072,31.855868, 29999]
},
{
name: '瑶海区',
value: [117.315358,31.86961, 29999]
},
]
}
},
mounted() {
this.mapInit()
console.log(mapname)
},
methods: {
mapInit() {
var that = this
this.$echarts.registerMap('hefei', mapname)
var myEcharts = this.$echarts.init(document.getElementById("mapBox"));
document.getElementById("mapBox").style.width = 900 "px";
document.getElementById("mapBox").style.height = 800 "px";
document.getElementById("mapBox").style.zIndex = '1111';
myEcharts.resize(); // 直接加这句即可
console.log(this.$echarts)
var option = {
backgroundColor: '#020933',
title: {
top: 20,
text: '安徽省',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
// tooltip: {
// trigger: 'item',
// formatter: function(params) {
// console.log(params)
// return params.name ' : ' params.value[2];
// }
// },
geo: {
map: 'hefei',
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: '#013C62',
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 25
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
show: false
}
}
}
},
series: [{
type: 'map',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green'
}
},
zoom: 1.1,
roam: false,
map: 'hefei' //使用
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#ffff',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: this.mapDate
}
]
};
myEcharts.setOption(option);
myEcharts.on('click', function(e) {
console.log(e)
var chooseName = that.mapJson.filter(item => {
return item.name == e.name
})
console.log(chooseName)
mapname = chooseName[0].json
console.log(mapname, '选择地图')
that.mapDate = []
$('<div class="back">返回合肥</div>').appendTo(
$('#chart-panel')
);
$('.back').css({
'position': 'absolute',
'left': '17px',
'top': '25px',
'color': '#000',
'font-size': '15px',
cursor: 'pointer',
'z-index': '100'
})
$('.back').click(function() {
mapname = anhui
this.mapDate = [
{
name: '合肥市',
value: [117.315358,31.86961, 29999]
},
{
name: '安庆市',
value: [117.044965,30.506375, 29999]
},
{
name: '蚌埠市',
value: [117.382312,32.950452, 29999]
},
{
name: '亳州市',
value: [115.781214,33.869284, 29999]
},
{
name: '池州市',
value: [117.488342,30.657378, 29999]
},
{
name: '滁州市',
value: [118.316475,32.303797, 29999]
},
{
name: '阜阳市',
value: [115.813914,32.891238, 29999]
},
{
name: '淮北市',
value: [116.833925,33.991218, 29999]
},
{
name: '淮南市',
value: [117.052927,32.632066, 29999]
},
{
name: '黄山市',
value: [118.317354,29.709186, 29999]
},
{
name: '六安市',
value: [116.503288,31.754491, 29999]
},
{
name: '马鞍山市',
value: [118.511308,31.69902, 29999]
},
{
name: '宿州市',
value: [116.983309,33.633853, 29999]
},
{
name: '铜陵市',
value: [117.816167,30.927613, 29999]
},
{
name: '芜湖市',
value: [118.376343,31.32559, 29999]
},
{
name: '宣城市',
value: [118.758412,30.946003, 29999]
},
];
$('.back').css({
'position': 'absolute',
'left': '17px',
'top': '-25px',
'color': 'rgb(222,222,222)',
'font-size': '15px',
cursor: 'pointer',
'z-index': '100'
})
that.mapInit()
})
that.mapInit()
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhiahgie
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22
