選中省份聯(lián)動對應(yīng)的二級市或三級區(qū)縣，有項(xiàng)目的地區(qū)進(jìn)行高亮標(biāo)點(diǎn)，浮窗顯示具體數(shù)值

//main.js 引入echarts import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts <!--父組件 全國地圖--> <div class="map" id="map"></div> <script>//引用地址在下方import china from '/public/json/china.json'import { Mapprovinces, MapprovincesText } from "./provinces.js";export default {data(){return{Mapprovinces,MapprovincesText,provinceInfo: {},projectMapVis:false}},mounted(){this.init()},methods:{// 該需求為通過點(diǎn)擊省份獲取該省份下的所有市(二級)/區(qū)縣（三級）init(){this.$echarts.registerMap('china', china);const provinceList = china.features;// axios 獲取后端數(shù)據(jù)，通過循環(huán)對比獲取對應(yīng)的經(jīng)緯度，進(jìn)行標(biāo)點(diǎn)/**let res = 'api/xxxxxxx'provinceList.filter(pl => {res.filter(al => {if (al.areaCode === pl.id) {projectNums.push({name: pl.properties.name,value: al.num,})effectScatterData.push({name: pl.properties.name,value: pl.properties.cp,num: al.num})}})})*/// 所需數(shù)據(jù)格式let projectNums = [{name:'云南',value:5},{name:'廣西',value:1}]; // 項(xiàng)目省份let effectScatterData = [{name:'云南',value:[101.712251, 24.040609],num:5},{name:'廣西',value:[108.720004, 23.82402],num:1}]; //散點(diǎn)數(shù)據(jù)const myChart = this.$echarts.init(document.getElementById('map'), null, {renderer: 'svg'});let option = {tooltip: {//提示框組件trigger: 'item',formatter: function (item) {if (item.componentSubType == 'map' && item.value) {return item.name + `<strong style="fontStyle:normal">${item.value}</strong>`} else if (item.componentSubType == 'effectScatter' && item.data.num) {return item.name + `<strong style="fontStyle:normal">${item.data.num}</strong>`} else {return item.name}},show: true,borderColor: '#fff',padding: [4, 15],textStyle: {color: "#262F3F",fontSize: 10}},geo: {map: 'china',aspectScale: 0.75,selectedMode: false,layoutCenter: ["50%", "50%"], layoutSize: '100%',regions: [{name: '南海諸島',itemStyle: {areaColor: 'rgba(0, 10, 52, 1)',borderColor: '#aee9fb',normal: {opacity: 0,label: {show: false,color: "#009cc9",}},},label: {show: false,color: '#262F3F',fontSize: 10,},}],},visualMap: {show: false,min: 1,inRange: {color: ['#EFF4F9']},},series: [// 常規(guī)地圖{type: 'map',mapType: 'china',aspectScale: 0.75, layoutCenter: ["50%", "50%"], layoutSize: '100%', label: {show: true, //區(qū)域formatter: '{b}',color: '#262F3F',fontSize: 10,},itemStyle: { // 區(qū)域樣式normal: {areaColor: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0, color: '#D7E0EC' }, {offset: 1, color: '#D1DBE8' }],global: false }, // 背景borderColor: '#A1AFC6',borderWidth: 1},emphasis: { // 區(qū)域hover樣式areaColor: 'pink',label: {color: "#262F3F"}},},select: { // 區(qū)域選中樣式itemStyle: {areaColor: 'pink'},label: {color: "#262F3F"}},data: projectNums},{type: 'effectScatter',coordinateSystem: 'geo',symbolSize: 4,rippleEffect: { //點(diǎn)動畫color: '#0051D9',period: 3,scale: 5,brushType: 'fill'},// 坐標(biāo)點(diǎn)data: effectScatterData,symbolOffset: ['-150%', '-150%'] // 光標(biāo)偏移},]};let that = thismyChart.on('click', function (params) {if (params.name == '南海諸島') { return }provinceList.filter(pl => {if (pl.properties.name === params.name) {params.areaCode = pl.id}})//點(diǎn)擊省份顯示二級或三級（市、區(qū)縣地圖）that.projectMapVis = true;myChart.setOption(option);that.provinceInfo = params // 子組件用});myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}}} </script> <!--子組件 根據(jù)所選省份聯(lián)動的市/區(qū)縣地圖--> <div class="map" id="provinceMap"></div> <script> import axios from "axios"; import { MapprovincesText, Mapprovinces } from "./provinces.js"; export default {data () {return {MapprovincesText,Mapprovinces}},methods:{// 省份點(diǎn)擊后調(diào)用 傳遞 provinceInfo 參數(shù)getCity(params){for (var i = 0; i < this.MapprovincesText.length; i++) {if (params.name == this.MapprovincesText[i]) {//點(diǎn)擊獲取對應(yīng)城市數(shù)據(jù) const name = this.Mapprovinces[i]//JSON數(shù)據(jù)在下方 來源datavlet url = '/json/province/' + name + '.json';axios.get(url).then(res => {this.canvasProvinceMap(name, params.areaCode, res.data)})break;}}},//繪制canvasProvinceMap: function (name, areaCode, mapData) {let _this = this;const params = {queryRange: "province",queryValue: areaCode}axios.get('xxxxxx').then(res => {const regionMapData = mapData.features;let projectNumData = [];let effectScatterData = [];regionMapData.filter(pl => {res.filter(al => {if (al.areaCode == pl.properties.adcode) {projectNumData.push({name: pl.properties.name,value: al.num,areaCode: al.areaCode})effectScatterData.push({areaCode: al.areaCode,name: pl.properties.name,// value: al.coordinate.split(','),value: pl.properties.centroid,num: al.num})}})})const provinceChart = this.$echarts.init(document.getElementById('provinceMap'), null, { renderer: 'svg' });this.$echarts.registerMap(name, mapData);//移除點(diǎn)擊事件provinceChart.off('click')// 繪制圖表let option = {tooltip: {trigger: 'item',formatter: function (item) {if (item.componentSubType == 'map' && item.value) {return item.name + item.value} else if (item.componentSubType == 'effectScatter' && item.data.num) {return item.name + item.data.num} else {return item.name}},show: true,borderColor: '#fff',padding: [4, 15],textStyle: {color: "#262F3F",fontSize: 8}},geo: {type: 'map',map: name, //省份selectedMode: false,aspectScale: 0.75,layoutCenter: ["50%", "50%"],layoutSize: '100%',roam: true, //是否平游或縮放scaleLimit: { //滾輪縮放的極限控制min: 1,max: 30},label: {show: true, //區(qū)域名稱樣式color: '#262F3F',fontSize: 8},itemStyle: { // 區(qū)域樣式normal: {areaColor: '#EFF4F9',// 背景borderColor: '#A1AFC6',borderWidth: 1},emphasis: { // 區(qū)域hover樣式areaColor: 'pink',label: {color: "#262F3F",fontSize: 8,}},},select: { // 選中樣式itemStyle: {areaColor: '#BCDAFF'}},},visualMap: {show: false,min: 1,inRange: {color: ['#BCDAFF']},},series: [{type: 'map',mapType: name,geoIndex: 0,aspectScale: 0.75,layoutCenter: ["50%", "50%"],layoutSize: '100%',data: projectNumData},// 區(qū)域散點(diǎn)圖{type: 'effectScatter',coordinateSystem: 'geo',symbolSize: 3,rippleEffect: { //點(diǎn)動畫color: '#0051D9',period: 3,scale: 3,brushType: 'fill'},data: effectScatterData}]};//散點(diǎn)點(diǎn)擊事件provinceChart.on('click', function (params) {});provinceChart.clear();setTimeout(() => {provinceChart.setOption(option);}, 300)window.addEventListener("resize", function () {provinceChart.resize();});})},} } </script>

靜態(tài)資源

//provinces.js const iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII=" const Mapprovinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']; const MapprovincesText = ['上海', '河北', '山西', '內(nèi)蒙古', '遼寧', '吉林', '黑龍江', '江蘇', '浙江', '安徽', '福建', '江西', '山東', '河南', '湖北', '湖南', '廣東', '廣西', '海南', '四川', '貴州', '云南', '西藏', '陜西', '甘肅', '青海', '寧夏', '新疆', '北京', '天津', '重慶', '香港', '澳門', '臺灣']; export {iconRQ,Mapprovinces,MapprovincesText, };

全國地圖數(shù)據(jù)及省市json數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的echarts默认高亮省市区联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。