echarts 地图下钻到市到区

echarts的地图展示，并且带有下钻到下级市区
vue.js里面操作echarts

//vue里面修改模板
<template><div id="china_map_box"><el-row><el-col :span="24">       <spanclass="span_city"v-for="(item, index) in cityTypeList":key="index"@click="setMap(index)">{{ item }}/</span></el-col></el-row><div id="china_map" style="height: 450px"></div></div>
</template><script>
let echarts = require("echarts/lib/echarts");
import "@/assets/mapJson/china.js";
import { cityMap as cityMapX } from "@/assets/map/china-main-city-map.js";
export default {data() {return {fristname: "",cityTypeList: ["全国"], //保存的层级信息  mydata: [{ name: "北京", value: "1000" },{ name: "天津", value: "3000" },{ name: "上海", value: "1200" },{ name: "重庆", value: this.randomData() },{ name: "河北", value: this.randomData() },{ name: "河南", value: this.randomData() },{ name: "云南", value: this.randomData() },{ name: "辽宁", value: this.randomData() },{ name: "黑龙江", value: this.randomData() },{ name: "湖南", value: this.randomData() },{ name: "安徽", value: this.randomData() },{ name: "山东", value: this.randomData() },{ name: "新疆", value: this.randomData() },{ name: "江苏", value: this.randomData() },{ name: "浙江", value: this.randomData() },{ name: "江西", value: this.randomData() },{ name: "湖北", value: this.randomData() },{ name: "广西", value: this.randomData() },{ name: "甘肃", value: this.randomData() },{ name: "山西", value: this.randomData() },{ name: "内蒙古", value: this.randomData() },{ name: "陕西", value: this.randomData() },{ name: "吉林", value: this.randomData() },{ name: "福建", value: this.randomData() },{ name: "贵州", value: this.randomData() },{ name: "广东", value: this.randomData() },{ name: "青海", value: this.randomData() },{ name: "西藏", value: this.randomData() },{ name: "四川", value: this.randomData() },{ name: "宁夏", value: this.randomData() },{ name: "海南", value: this.randomData() },{ name: "台湾", value: this.randomData() },{ name: "香港", value: this.randomData() },{ name: "澳门", value: this.randomData() },],optionMap: {backgroundColor: "#FFFFFF",tooltip: {triggerOn: "mousemove", //mousemove、clicktrigger: "item",padding: 8,borderWidth: 1,borderColor: "#409eff",backgroundColor: "rgba(255,255,255,0.7)",textStyle: {color: "#000000",fontSize: 13,},formatter: function (e, t, n) {// console.log(e, t, n);let data = e.data;let context = `<p><b style="font-size:15px;">${e.name}</b> (2021年第一季度)</p>`;return context;},},//左侧小导航图标visualMap: {show: true,left: 26,bottom: 40,showLabel: true,pieces: [{gte: 500000,label: ">= 500000以上",color: "#27BC7F",},{gte: 10000,lt: 49999,label: "10000 - 49999",color: "#52C999",},{gte: 5000,lt: 9999,label: "5000 - 9999",color: "#7DD7B2",},{gte: 1000,lt: 4999,label: "1000 - 4999",color: "#A9E4CC",},{gte: 1,lt: 999,label: "1-999",color: "#D4F2E5",},{lt: 0,label: "0",color: "#E2E7E5",},],},//配置属性series: [{name: "数据",type: "map",map: "china",roam: true,label: {normal: {show: true, //省份名称},emphasis: {//   color:'green',// show: false,},},itemStyle: {normal: {borderWidth: 0.5, //区域边框宽度borderColor: "#009fe8", //区域边框颜色areaColor: "#ffefd5", //区域颜色},},data: [], //数据},],},};},methods: {randomData() {return Math.random() * 10000;},setMap(index) { //     《这个是顶部显示的 类似面包屑》var myChart = echarts.init(document.getElementById("china_map"));let name = this.cityTypeList[index];console.log(name);if (name != "全国") {let cityName = cityMapX[name];var appData = require(`@/assets/map/${cityName}`);echarts.registerMap(name, appData);this.optionMap.series[0]["map"] = name;} else {this.optionMap.series[0]["map"] = "china";this.setEchartOption();}this.cityTypeList.splice(index + 1);myChart.setOption(this.optionMap, true);},init() {//初始化echarts实例let _this = this;var myChart = echarts.init(document.getElementById("china_map"));myChart.on("click", function (params) {// let cityName = cityMap.cityMap[params.name];// var appData = require(`@/assets/mapJson/${cityName}`);let cityName = cityMapX[params.name];console.log(cityName);if (!cityName) {return;}var appData = require(`@/assets/map/${cityName}`);_this.cityTypeList.push(params.name);_this.optionMap.series[0]["map"] = params.name;echarts.registerMap(params.name, appData);//  _this.optionMap.series[0]["data"] = _this.mydatacity; 数据展示myChart.setOption(_this.optionMap, true);});//使用制定的配置项和数据显示图表myChart.setOption(this.optionMap);},setEchartOption() {this.optionMap.series[0]["data"] = this.mydata;},},created() {this.setEchartOption();},mounted() {this.init();},
};
</script>
<style lang="scss" scoped>
.span_city {font-size: 15px;font-weight: 520;cursor: pointer;-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;margin-right: 5px;&:hover {color: #32be84;text-decoration: #7dd7b2;}
}
.row_item {i{color: #8c8c8c !important;}& > span {width: 130px;text-align: right;/* float: inherit; */display: inline-block;margin-right: 5px;}.nums_all {margin-top: 10px;display: inline-block;span {background: #f2f7f7;font-size: 12px;padding: 2px 4px;border: 1px solid #ebebeb;}}
}
</style>

//上面就是页面上echarts的配置
数据文件存放地址提取码：zzta

文件的引入方式是你自己的文件存放相对位置，差不多就完了可以初步显示。

需要注意的点

文件的引用位置，写你自己的位置
china-main-city-map.js文件的编号对应json文件
series:[{ roam: true}] //是否允许地图的缩放
文件的加载最好采用动态加载 require(@/assets/map/${cityName})
myChart.setOption(_this.optionMap, true); 第二个参数表示是否重新绘制画布，允许缩放的时候这个加上挺重要的！

差不多就这样完成基本设置
效果如图:

这样就完成了地图下钻展示了，颜色的不同是因为传给地图data的数据，要有对应的省市区的值才会显示。

echarts 地图下钻到市到区相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
echarts 省级地图下钻到市demo
借鉴了昨夜小楼又东风这位兄弟的代码 https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribut ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
Echarts 简单实现地图省 =＞市 =＞区 =＞镇街下钻
本文仅展示最简单实现, 实际使用要结合后台设计, 思路一致; 完整代码: GitHub - byc233518/echarts-map-drillinghttps://github.com/byc23 ...
Echarts地图下钻，省钻到市，市钻到县，县钻到乡
由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现. 先贴两张图,第1张是全国地图: 第2张是点击河北后的河北省地图: 步骤详解: 1. 引入js const echarts = r ...
echarts地图下钻效果
先看效果图,第二张是因为数据差距过大导致.可调再看代码 import * as echarts from 'echarts'; import mapJson from '../utils/福州市.j ...

echarts 地图下钻到市到区

需要注意的点

echarts 地图下钻到市到区相关推荐

最新文章

热门文章

echarts 地图下钻 到市 到区

需要注意的点

echarts 地图下钻 到市 到区相关推荐

最新文章

热门文章

echarts 地图下钻到市到区

echarts 地图下钻到市到区相关推荐