echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)

(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 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)相关推荐

vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts.map！
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一.不可否认,pyecharts绘制的地 ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
echarts地图地名显示_ECharts特定地图区域的文本标签
geo.regions[i].label | Object 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label 选项在 ECharts 2.x 中放置于 itemSty ...
echarts 地图去除点击事件_ECharts地图区域处理事件
ECharts 中有两种方式的地图区域处理: 一种是在 geo 中: 另一种是在 series-map 中 geo 的情况下 : events.geoselectchanged | Event ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
echarts合并地图区域去除区域交界线（以合并泰州两个区为例）
需求客户要求合并泰州海陵区和泰州高港区,综合统计两个区的业务数据实现如果有了解过echarts地图json,应该知道地图点是由coordinates这个属性渲染的那么只需要复制海陵区和高港区的 ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts！
点击上方"数据管道",选择"置顶星标"公众号干货福利,第一时间送达导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现, ...

echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)

echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)相关推荐

最新文章

热门文章