echarts地图下钻可缩放

在geo中写相关属性
点击查看geo相关属性

geo 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

   geo: {map: map,// center: [115.97, 29.71],//当前视角的中心点zoom: 1.2, //当前视角的缩放比例roam: true, //是否开启平游或缩放scaleLimit: {//滚轮缩放的极限控制min: 1,max: 5,},//图形上的文本标签，可用于说明图形的一些数据信息label: {show: true,fontSize: "12",align: "center",position: ["50%", "50%"],color: "rgba(0,0,0,0.9)",},//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。emphasis: { //normal 是图形在默认状态下的样式；borderColor: "rgba(0, 0, 0, 0.2)",itemStyle: {areaColor: "#F3B329",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},

html

<template><div><div><el-button type="mini" v-show="backtop" @click="backMap()" class="btn">返回</el-button><div id="container"></div></div></div>
</template>

js:

<script>
let echarts = require("echarts/lib/echarts");
import $ from "jquery";
require("echarts/lib/chart/map");
import chinaMap from "@/assets/json/china.json";export default {name: "mapChart",data() {return {backtop: false, //返回按钮默认隐藏};},mounted() {echarts.registerMap("china", { geoJSON: chinaMap });// 初始化加载this.mapChart();},methods: {// 返回全国视图backMap() {this.backtop = false;this.$options.methods.mapChart();},// 配置渲染mapmapChart() {let myChart = echarts.init(document.getElementById("container"));window.addEventListener("resize", () => {myChart.resize();});initEcharts("china");function initEcharts(map) {console.log(map);let option = {geo: {map: map,// center: [115.97, 29.71],//当前视角的中心点zoom: 1.2, //当前视角的缩放比例roam: true, //是否开启平游或缩放scaleLimit: {//滚轮缩放的极限控制min: 1,max: 5,},// 地图背景色itemStyle: {areaColor: "#134AE0",borderColor: "#12DDF2",// borderWidth:"2"},//图形上的文本标签，可用于说明图形的一些数据信息label: {show: true,fontSize: "12",align: "center",position: ["50%", "50%"],color: "rgba(255,255,255,0.8)",emphasis: {show: true, //开启悬浮事件color: "#D4EEFF", //字体颜色},},//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。emphasis: {itemStyle: {areaColor: "#5C99FF",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 10,borderWidth: 0,shadowColor: "#175CEB",color: "rgba(255,255,255,0.8)",selectorLabel: {color: "rgba(255,255,255,0.8)",},},},// 单个地图加颜色regions: [{label: {color: "rgba(0,0,0,0.7)",},name: "山东",itemStyle: {areaColor: "#99BEFF",},},{label: {color: "rgba(0,0,0,0.7)",},name: "日照市",itemStyle: {areaColor: "#99BEFF",},},],},tooltip: {trigger: "item",},series: [{name: "信息量",type: "map",//这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'mapType: map,geoIndex: 0,data: cityMap,color: "#d00",},],};myChart.setOption(option, true);}//定义全国省份的数组var provinces = {// 23个省台湾: "taiwan",河北: "hebei",山西: "shanxi",辽宁: "liaoning",吉林: "jilin",黑龙江: "heilongjiang",江苏: "jiangsu",浙江: "zhejiang",安徽: "anhui",福建: "fujian",江西: "jiangxi",山东: "shandong",河南: "henan",湖北: "hubei",湖南: "hunan",广东: "guangdong",海南: "hainan",四川: "sichuan",贵州: "guizhou",云南: "yunnan",陕西: "shanxi1",甘肃: "gansu",青海: "qinghai",// 5个自治区新疆: "xinjiang",广西: "guangxi",内蒙古: "neimenggu",宁夏: "ningxia",西藏: "xizang",// 4个直辖市北京: "beijing",天津: "tianjin",上海: "shanghai",重庆: "chongqing",// 2个特别行政区香港: "xianggang",澳门: "aomen",};// 市var cityMap = [{ name: "北京市", value: "110100" },{ name: "天津市", value: "120100" },{ name: "上海市", value: "310100" },{ name: "重庆市", value: "500100" },{ name: "崇明县", value: "310200" },{ name: "湖北省直辖县市", value: "429000" },{ name: "铜仁市", value: "522200" },{ name: "毕节市", value: "522400" },{ name: "石家庄市", value: "130100" },{ name: "唐山市", value: "130200" },{ name: "秦皇岛市", value: "130300" },{ name: "邯郸市", value: "130400" },{ name: "邢台市", value: "130500" },{ name: "保定市", value: "130600" },{ name: "张家口市", value: "130700" },{ name: "承德市", value: "130800" },{ name: "沧州市", value: "130900" },{ name: "廊坊市", value: "131000" },{ name: "衡水市", value: "131100" },{ name: "太原市", value: "140100" },{ name: "大同市", value: "140200" },{ name: "阳泉市", value: "140300" },{ name: "长治市", value: "140400" },{ name: "晋城市", value: "140500" },{ name: "朔州市", value: "140600" },{ name: "晋中市", value: "140700" },{ name: "运城市", value: "140800" },{ name: "忻州市", value: "140900" },{ name: "临汾市", value: "141000" },{ name: "吕梁市", value: "141100" },{ name: "呼和浩特市", value: "150100" },{ name: "包头市", value: " 150200" },{ name: "乌海市", value: " 150300" },{ name: "赤峰市", value: " 150400" },{ name: "通辽市", value: " 150500" },{ name: "鄂尔多斯市", value: "150600" },{ name: "呼伦贝尔市", value: "150700" },{ name: "巴彦淖尔市", value: "150800" },{ name: "乌兰察布市", value: "150900" },{ name: "兴安盟", value: " 152200" },{ name: "锡林郭勒盟", value: "152500" },{ name: "阿拉善盟", value: "152900" },{ name: "沈阳市", value: "210100" },{ name: "大连市", value: "210200" },{ name: "鞍山市", value: "210300" },{ name: "抚顺市", value: "210400" },{ name: "本溪市", value: "210500" },{ name: "丹东市", value: "210600" },{ name: "锦州市", value: "210700" },{ name: "营口市", value: "210800" },{ name: "阜新市", value: "210900" },{ name: "辽阳市", value: "211000" },{ name: "盘锦市", value: "211100" },{ name: "铁岭市", value: "211200" },{ name: "朝阳市", value: "211300" },{ name: "葫芦岛市", value: "211400" },{ name: "长春市", value: "220100" },{ name: "吉林市", value: "220200" },{ name: "四平市", value: "220300" },{ name: "辽源市", value: "220400" },{ name: "通化市", value: "220500" },{ name: "白山市", value: "220600" },{ name: "松原市", value: "220700" },{ name: "白城市", value: "220800" },{ name: "延边朝鲜族自治州", value: "222400" },{ name: "哈尔滨市", value: "230100" },{ name: "齐齐哈尔市", value: "230200" },{ name: "鸡西市:", value: "230300" },{ name: "鹤岗市:", value: "230400" },{ name: "双鸭山市", value: "230500" },{ name: "大庆市", value: "230600" },{ name: "伊春市", value: "230700" },{ name: "佳木斯市", value: "230800" },{ name: "七台河市", value: "230900" },{ name: "牡丹江市", value: "231000" },{ name: "黑河市", value: " 231100" },{ name: "绥化市", value: " 231200" },{ name: "大兴安岭", value: "地区: 232700" },{ name: "南京市:", value: " 320100" },{ name: "无锡市:", value: " 320200" },{ name: "徐州市:", value: " 320300" },{ name: "常州市:", value: " 320400" },{ name: "苏州市:", value: " 320500" },{ name: "南通市:", value: " 320600" },{ name: "连云港市", value: ": 320700" },{ name: "淮安市:", value: "320800" },{ name: "盐城市:", value: "320900" },{ name: "扬州市:", value: "321000" },{ name: "镇江市:", value: "321100" },{ name: "泰州市:", value: "321200" },{ name: "宿迁市:", value: "321300" },{ name: "杭州市:", value: "330100" },{ name: "宁波市:", value: "330200" },{ name: "温州市:", value: "330300" },{ name: "嘉兴市:", value: "330400" },{ name: "湖州市:", value: "330500" },{ name: "绍兴市:", value: "330600" },{ name: "金华市:", value: "330700" },{ name: "衢州市:", value: "330800" },{ name: "舟山市:", value: "330900" },{ name: "台州市:", value: "331000" },{ name: "丽水市:", value: "331100" },{ name: "合肥市:", value: "340100" },{ name: "芜湖市:", value: "340200" },{ name: "蚌埠市:", value: "340300" },{ name: "淮南市:", value: "340400" },{ name: "马鞍山市", value: ":340500" },{ name: "淮北市:", value: "340600" },{ name: "铜陵市:", value: "340700" },{ name: "安庆市:", value: "340800" },{ name: "黄山市:", value: "341000" },{ name: "滁州市:", value: "341100" },{ name: "阜阳市:", value: "341200" },{ name: "宿州市:", value: "341300" },{ name: "六安市:", value: "341500" },{ name: "亳州市:", value: "341600" },{ name: "池州市:", value: "341700" },{ name: "宣城市:", value: "341800" },{ name: "福州市:", value: "350100" },{ name: "厦门市:", value: "350200" },{ name: "莆田市:", value: "350300" },{ name: "三明市:", value: "350400" },{ name: "泉州市:", value: "350500" },{ name: "漳州市:", value: "350600" },{ name: "南平市:", value: "350700" },{ name: "龙岩市:", value: "350800" },{ name: "宁德市:", value: "350900" },{ name: "南昌市:", value: "360100" },{ name: "景德镇市", value: ":360200" },{ name: "萍乡市:", value: "360300" },{ name: "九江市:", value: "360400" },{ name: "新余市:", value: "360500" },{ name: "鹰潭市:", value: "360600" },{ name: "赣州市:", value: "360700" },{ name: "吉安市:", value: "360800" },{ name: "宜春市:", value: "360900" },{ name: "抚州市:", value: "361000" },{ name: "上饶市:", value: "361100" },{ name: "济南市:", value: "370100" },{ name: "青岛市:", value: "370200" },{ name: "淄博市:", value: "370300" },{ name: "枣庄市:", value: "370400" },{ name: "东营市:", value: "370500" },{ name: "烟台市:", value: "370601" },{ name: "潍坊市:", value: "370700" },{ name: "济宁市:", value: "370800" },{ name: "泰安市:", value: "370900" },{ name: "威海市:", value: "371000" },{ name: "日照市:", value: "371100" },{ name: "莱芜市:", value: "371200" },{ name: "临沂市:", value: "371300" },{ name: "德州市:", value: "371400" },{ name: "聊城市:", value: "371500" },{ name: "滨州市:", value: "371600" },{ name: "菏泽市:", value: "371700" },{ name: "郑州市:", value: "410100" },{ name: "开封市:", value: "410200" },{ name: "洛阳市:", value: "410300" },{ name: "平顶山市", value: "410400" },{ name: "安阳市:", value: "410500" },{ name: "鹤壁市:", value: "410600" },{ name: "新乡市:", value: "410700" },{ name: "焦作市:", value: "410800" },{ name: "濮阳市:", value: "410900" },{ name: "许昌市:", value: "411000" },{ name: "漯河市:", value: "411100" },{ name: "三门峡市", value: "411200" },{ name: "南阳市:", value: "411300" },{ name: "商丘市:", value: "411400" },{ name: "信阳市:", value: "411500" },{ name: "周口市:", value: "411600" },{ name: "驻马店市", value: "411700" },{ name: "省直辖县级行政区划", value: "469000" },{ name: "武汉市", value: " 420100" },{ name: "黄石市", value: " 420200" },{ name: "十堰市", value: " 420300" },{ name: "宜昌市", value: " 420500" },{ name: "襄阳市", value: " 420600" },{ name: "鄂州市", value: " 420700" },{ name: "荆门市", value: " 420800" },{ name: "孝感市", value: " 420900" },{ name: "荆州市", value: " 421000" },{ name: "黄冈市", value: " 421100" },{ name: "咸宁市", value: " 421200" },{ name: "随州市", value: " 421300" },{ name: "恩施土家族苗族自治州", value: "422800" },{ name: "长沙市:", value: "430100" },{ name: "株洲市:", value: "430200" },{ name: "湘潭市:", value: "430300" },{ name: "衡阳市:", value: "430400" },{ name: "邵阳市:", value: "430500" },{ name: "岳阳市:", value: "430600" },{ name: "常德市:", value: ' "430700' },{ name: "张家界市", value: "430800" },{ name: "益阳市:", value: "430900" },{ name: "郴州市:", value: "431000" },{ name: "永州市:", value: "431100" },{ name: "怀化市:", value: "431200" },{ name: "娄底市:", value: "431300" },{ name: "湘西土家族苗族自治州", value: "433100" },{ name: "广州市", value: "440100" },{ name: "韶关市", value: "440200" },{ name: "深圳市", value: "440300" },{ name: "珠海市", value: "440400" },{ name: "汕头市", value: "440500" },{ name: "佛山市", value: "440600" },{ name: "江门市", value: "440700" },{ name: "湛江市", value: "440800" },{ name: "茂名市", value: "440900" },{ name: "肇庆市", value: "441200" },{ name: "惠州市", value: "441300" },{ name: "梅州市", value: "441400" },{ name: "汕尾市", value: "441500" },{ name: "河源市", value: "441600" },{ name: "阳江市", value: "441700" },{ name: "清远市", value: "441800" },{ name: "东莞市", value: "441900" },{ name: "中山市", value: "442000" },{ name: "潮州市", value: "445100" },{ name: "揭阳市", value: "445200" },{ name: "云浮市", value: "445300" },{ name: "南宁市", value: "450100" },{ name: "柳州市", value: "450200" },{ name: "桂林市", value: "450300" },{ name: "梧州市", value: "450400" },{ name: "北海市", value: "450500" },{ name: "防城港市", value: "450600" },{ name: "钦州市:", value: "450700" },{ name: "贵港市:", value: "450800" },{ name: "玉林市:", value: "450900" },{ name: "百色市:", value: "451000" },{ name: "贺州市:", value: "451100" },{ name: "河池市:", value: "451200" },{ name: "来宾市:", value: "451300" },{ name: "崇左市:", value: "451400" },{ name: "海口市:", value: "460100" },{ name: "三亚市:", value: "460200" },{ name: "三沙市:", value: "460300" },{ name: "成都市:", value: "510100" },{ name: "自贡市:", value: "510300" },{ name: "攀枝花市", value: ":510400" },{ name: "泸州市:", value: "510500" },{ name: "德阳市:", value: "510600" },{ name: "绵阳市:", value: "510700" },{ name: "广元市:", value: "510800" },{ name: "遂宁市:", value: "510900" },{ name: "内江市:", value: "511000" },{ name: "乐山市:", value: "511100" },{ name: "南充市:", value: "511300" },{ name: "眉山市:", value: "511400" },{ name: "宜宾市:", value: "511500" },{ name: "广安市:", value: "511600" },{ name: "达州市:", value: "511700" },{ name: "雅安市:", value: "511800" },{ name: "巴中市:", value: "511900" },{ name: "资阳市:", value: "512000" },{ name: "阿坝藏族羌族自治州", value: "513200" },{ name: "甘孜藏族", value: "自治州:513300" },{ name: "凉山彝族", value: "自治州:513400" },{ name: "贵阳市:", value: "520100" },{ name: "六盘水市", value: ":520200" },{ name: "遵义市:", value: "520300" },{ name: "安顺市:", value: "520400" },{ name: "黔西南布依族苗族自治州", value: "522300" },{ name: "黔东南苗族侗族自治州", value: "522600" },{ name: "黔南布依族苗族自治州", value: "522700" },{ name: "昆明市:", value: "530100" },{ name: "曲靖市:", value: "530300" },{ name: "玉溪市:", value: "530400" },{ name: "保山市:", value: "530500" },{ name: "昭通市:", value: "530600" },{ name: "丽江市:", value: "530700" },{ name: "普洱市:", value: "530800" },{ name: "临沧市:", value: "530900" },{ name: "楚雄彝族自治州", value: "532300" },{ name: "红河哈尼族彝族自治州", value: "532500" },{ name: "文山壮族苗族自治州", value: "532600" },{ name: "西双版纳傣族自治州", value: "532800" },{ name: "大理白族自治州", value: "532900" },{ name: "德宏傣族景颇族自治州", value: "533100" },{ name: "怒江傈僳族自治州", value: "533300" },{ name: "迪庆藏族自治州", value: "533400" },{ name: "拉萨市:", value: "540100" },{ name: "昌都地区", value: "542100" },{ name: "山南地区", value: "542200" },{ name: "日喀则地", value: "区:542300" },{ name: "那曲地区", value: ":542400" },{ name: "阿里地区", value: ":542500" },{ name: "林芝地区", value: ":542600" },{ name: "西安市:", value: "610100" },{ name: "铜川市:", value: "610200" },{ name: "宝鸡市:", value: "610300" },{ name: "咸阳市:", value: "610400" },{ name: "渭南市:", value: "610500" },{ name: "延安市:", value: "610600" },{ name: "汉中市:", value: "610700" },{ name: "榆林市:", value: "610800" },{ name: "安康市:", value: "610900" },{ name: "商洛市:", value: "611000" },{ name: "兰州市:", value: "620100" },{ name: "嘉峪关市", value: "620200" },{ name: "金昌市:", value: "620300" },{ name: "白银市:", value: "620400" },{ name: "天水市:", value: "620500" },{ name: "武威市:", value: "620600" },{ name: "张掖市:", value: "620700" },{ name: "平凉市:", value: "620800" },{ name: "酒泉市:", value: "620900" },{ name: "庆阳市:", value: "621000" },{ name: "定西市:", value: "621100" },{ name: "陇南市:", value: "621200" },{ name: "临夏回族自治州", value: "622900" },{ name: "甘南藏族自治州", value: "623000" },{ name: "西宁市:", value: "630100" },{ name: "海东地区", value: ":632100" },{ name: "海北藏族自治州", value: "632200" },{ name: "黄南藏族自治州", value: "632300" },{ name: "海南藏族自治州", value: "632500" },{ name: "果洛藏族自治州", value: "632600" },{ name: "玉树藏族自治州", value: "632700" },{ name: "海西蒙古族藏族自治州", value: "632800" },{ name: "银川市:", value: "640100" },{ name: "石嘴山市", value: "640200" },{ name: "吴忠市:", value: "640300" },{ name: "固原市:", value: "640400" },{ name: "中卫市:", value: "640500" },{ name: "乌鲁木齐", value: "市:650100" },{ name: "克拉玛依", value: "市:650200" },{ name: "吐鲁番地", value: "区:652100" },{ name: "哈密地区", value: "652200" },{ name: "昌吉回族", value: '自治州: "652300' },{ name: "博尔塔拉蒙古自治州", value: "652700" },{ name: "巴音郭楞蒙古自治州", value: "652800" },{ name: "阿克苏地区", value: "652900" },{ name: "克孜勒苏柯尔克孜自治州", value: "653000" },{ name: "喀什地区", value: ":653100" },{ name: "和田地区", value: ":653200" },{ name: "伊犁哈萨克自治州", value: "654000" },{ name: "塔城地区", value: ":654200" },{ name: "阿勒泰地区", value: "654300" },{ name: "自治区直辖县级行政区划", value: "659000" },{ name: "台湾省:", value: "710000" },{ name: "香港特别", value: "行政区:810100" },{ name: "澳门特别", value: "行政区:820000" },];var that = this;myChart.on("click", (param) => {if (param.name in provinces) {// 处理省模块let names = param.name;for (let key in provinces) {this.backtop = true;showProvince(provinces[key], key);}});//展示对应的省function showProvince(eName, param) {$(window).scrollTop(0);console.log(eName, param);$.getJSON(`/map/province/${eName}.json`, (data) => {console.log(that.$echarts);that.$echarts.registerMap(param, data);initEcharts(param);});}//展示对应市function showCitys(cName, param) {// this.backtop = true;$(window).scrollTop(0);// 显示县级地图$.getJSON(`/map/city/${cName}.json`, (data) => {that.$echarts.registerMap(param, data);alert("县");initEcharts(param);});}},},
};
</script>

css

<style scoped>
#container {width: 100%;height: 7.5rem;margin: 0rem auto 0;
}
.btn {position: absolute;right: 5%;z-index: 999;width: 1.5rem;background-color: #134ae0;font-size: 0.2rem;color: #fff;display: flex;justify-content: center;align-items: center;border: .0125rem solid #12b3ed;
}
</style>

解决Echarts图标在浏览器缩放后位置偏移

当你打开地图后可能会发现地图下钻到第二级（市）地图并不在容器内，这是因为我们将echarts地图放大缩小拖拽后，导致再次渲染时偏移出了原来的容器
我们可以在渲染之前重置chart，取消状态即可

 myChart.setOption(option, true);

echarts地图下钻可缩放相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...
echarts地图下钻效果
先看效果图,第二张是因为数据差距过大导致.可调再看代码 import * as echarts from 'echarts'; import mapJson from '../utils/福州市.j ...
Echarts地图下钻，省钻到市，市钻到县，县钻到乡
由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现. 先贴两张图,第1张是全国地图: 第2张是点击河北后的河北省地图: 步骤详解: 1. 引入js const echarts = r ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...

echarts地图下钻可缩放

echarts地图下钻可缩放

解决Echarts图标在浏览器缩放后位置偏移

echarts地图下钻可缩放相关推荐

最新文章

热门文章