(1)地圖:1、下載矢量地圖.json文件 2、請求.json文件var map=await axios.get('./static/矢量地圖數據/china.json');3、注冊地圖echarts.registerMap('chinaMap',map.data);4、配置geooptions中和series同級設置geo:{type:'map',map:'chinaMap', 和注冊地圖的名稱相同roam:true, 是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移,可以設置成'scale'或者'move'。設置成true為都開啟selectedMode:'multiple', 是否顯示點擊選中地區,'single'|'multiple'label:{ 是否顯示數據中的nameshow:true},emphasis:{ 設置鼠標滑動高亮樣式itemStyle:{color:'purple'}}regions: [{ 對指定區域進行配置name: '地圖上的區域名稱',itemStyle: {areaColor: 'red',borderColor: 'rgba(0, 10, 52, 1)',},}],zoom:2, 設置初始化縮放比例center:[87.6,43.79], 設置地圖中心點,值為經緯度},5、配置數據和類型series數據類型:[{name:'省份',value:數值}]series:[{type:'map',data:airData,geoIndex:0, 將數據和第一個geo關聯在一起}],6、添加visualMap對地圖進行篩選樣式和series同級設置visualMap:{min:0, 篩選最小值,用來限制數據中的valuemax:300, 篩選最大值range: [4, 15], 定義初始篩選值inRange: { 選中樣式的漸變色樣式,個數無要求color: ['red', 'orange', 'green'],},outOfRange:{ 未選中樣式的漸變色樣式,個數無要求,需設置calculablecolor:['purple','blue']},hoverLink:true, 使得篩選器會有數值顯示calculable:true, 增加首尾三角篩選器,使得outOfRange可以顯示orient:'horizontal' 定義篩選器方向,'vertical'}(2)地圖和散點圖結合:1、配置散點圖數據[[經度,緯度],[精度,緯度]]2、在地圖的配置基礎上,series中配置散點圖{type:'effectScatter', data:scatterData,coordinateSystem:'geo', 將散點圖坐標系更改為地理坐標系rippleEffect:{ 設置漣漪動畫scale:10,color:'purple'}}(3)點擊省份進入省份地圖(雙擊切換回來)1、監聽地圖點擊事件當點擊時,獲取到省份名稱,然后根據名稱獲取到省份地圖矢量數據2、當未曾注冊過省份地圖時(1)echarts.registerMap注冊;(2)設置option={geo:{map:'注冊地圖名稱'}}(3)echarts.init對象.setOption(option);3、雙擊屏幕切換回原來地圖監聽整個容器的雙擊事件,事件中調用const option={geo:{map:'之前注冊的地圖'}}echarts.init對象.setOption(option);

效果圖:

代碼示例:

export default {name: 'App',mounted:async function(){var myMap=echarts.init(document.querySelector('.map'));var airData = [ //name必須和省份保持一致{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重慶', value: 66 },{ name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南', value: 25.04 },{ name: '遼寧', value: 50 },{ name: '黑龍江', value: 114 },{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山東', value: 92 },{ name: '新疆', value: 84 },{ name: '江蘇', value: 67 },{ name: '浙江', value: 84 },{ name: '江西', value: 96 },{ name: '湖北', value: 273 },{ name: '廣西', value: 59 },{ name: '甘肅', value: 99 },{ name: '山西', value: 39 },{ name: '內蒙古', value: 58 },{ name: '陜西', value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },{ name: '貴州', value: 71 },{ name: '廣東', value: 38 },{ name: '青海', value: 57 },{ name: '西藏', value: 24 },{ name: '四川', value: 58 },{ name: '寧夏', value: 52 },{ name: '海南', value: 54 },{ name: '臺灣', value: 88 },{ name: '香港', value: 66 },{ name: '澳門', value: 77 },{ name: '南海諸島', value: 55 }]//數據類型一// var scatterData = [// {// value: [117.283042, 31.86119]// },// {// value: [86, 49]// }// ]//數據類型二var scatterData=[[117.283042, 31.86119],[86, 49]]var map=await axios.get('./static/矢量地圖數據/china.json');echarts.registerMap('chinaMap',map.data);var option = {geo:{type:'map',map:'chinaMap',roam:true, //是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移,可以設置成'scale'或者'move'。設置成true為都開啟// selectedMode:'multiple', //是否點擊選中地區,'single'|'multiple'label:{show:true},emphasis:{ //設置鼠標滑動高亮樣式itemStyle:{color:'purple'}}// zoom:2, //設置初始化縮放比例// center:[87.6,43.79], //設置地圖中心點,值為經緯度},series:[{type:'map',data:airData,geoIndex:0, //將數據和第一個geo關聯在一起},{type:'effectScatter',data:scatterData,coordinateSystem:'geo',rippleEffect:{scale:10,color:'purple'}}],visualMap:{min:0,max:300,// range: [4, 15], //定義初始篩選值inRange: {color: ['red', 'orange', 'green'],},outOfRange:{color:['purple','blue']},hoverLink:true, //使得篩選器會有數值顯示calculable:true, //增加首尾三角篩選器,使得outOfRange可以顯示// orient:'horizontal' 定義篩選器方向,'vertical'}};myMap.setOption(option);} }

省份切換:

<template><div class='s-c'><div class='s-chart' ref='map' @dblclick="backChina"></div></div> </template><script> import axios from 'axios'; import {getProvinceMapInfo} from '../utils/pingying'export default {name:'trender',data(){return{myMap:null,data:[],mapCity:{}}},mounted(){this._initChart();this._getData();window.onresize=this._resize;//第一次適配調用this._resize();},destroyed(){window.removeEventListener('resize',this._resize);},methods:{async _initChart(){this.myMap=this.$echarts.init(this.$refs.map,'chalk');//配置地圖var map=await this.$axios.get('http://localhost:8080/static/map/china.json');this.$echarts.registerMap('chinaMap',map.data);const option={title: {text: '▎ 商家分布',left: 20,top: 20},geo: {type: 'map',map: 'chinaMap',top: '5%',bottom: '5%',itemStyle: {areaColor: '#2E72BF',borderColor: '#333'},label:{ show:true},},legend: {left: '5%',bottom: '5%',orient: 'vertical'}};this.myMap.setOption(option);//點擊監聽,獲取點擊省份的矢量地圖數據this.myMap.on('click',async (e)=>{let path=getProvinceMapInfo(e.name);//是否已經注冊過if(!this.mapCity[path.key]){let res= await axios.get(path.path);this.mapCity[path.key]=res.data//注冊地圖this.$echarts.registerMap(path.key,res.data);}const option={geo:{map:path.key}}this.myMap.setOption(option);}) },async _getData(){let res=await this.$axios.get('/api/map');this.data=res.data;this._updateChart();},_updateChart(){let scatter=this.data.map((item,index)=>{//一個類別的多個散點return{type:'effectScatter',name:item.name,data:item.children,coordinateSystem:'geo',rippleEffect:{ scale:10,}}})let legendArr=this.data.map((item,index)=>{return item.name})const option={legend:{data:legendArr},series:scatter,};this.myMap.setOption(option);},_resize(){let container = this.$refs.map.offsetWidth;let titleFontSize=container/100*3.6;const option={title:{textStyle:{fontSize:titleFontSize}},legend:{itemWidth:titleFontSize/2,itemHeight:titleFontSize/2,textStyle:{fontSize:titleFontSize/2}}};this.myMap.setOption(option);this.myMap.resize();},//雙擊回到中國地圖backChina(){const option={geo:{map:'chinaMap'}}this.myMap.setOption(option);}}} </script><style lang='less' scoped> .s-c{width: 100%;height:100%;.s-chart{width: 100%;height:100%;} } </style>

工具代碼:

const name2pinyin = {安徽: 'anhui',陜西: 'shanxi1',澳門: 'aomen',北京: 'beijing',重慶: 'chongqing',福建: 'fujian',甘肅: 'gansu',廣東: 'guangdong',廣西: 'guangxi',貴州: 'guizhou',海南: 'hainan',河北: 'hebei',黑龍江: 'heilongjiang',河南: 'henan',湖北: 'hubei',湖南: 'hunan',江蘇: 'jiangsu',江西: 'jiangxi',吉林: 'jilin',遼寧: 'liaoning',內蒙古: 'neimenggu',寧夏: 'ningxia',青海: 'qinghai',山東: 'shandong',上海: 'shanghai',山西: 'shanxi',四川: 'sichuan',臺灣: 'taiwan',天津: 'tianjin',香港: 'xianggang',新疆: 'xinjiang',西藏: 'xizang',云南: 'yunnan',浙江: 'zhejiang'}export function getProvinceMapInfo (arg) {const path = `http://localhost:8080/static/map/province/${name2pinyin[arg]}.json`return {key: name2pinyin[arg],path: path}}

總結

以上是生活随笔為你收集整理的echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。