echarts地图设置背景图片及海岸线实例代码
更新时间：2022年12月09日 15:40:02 作者：紫雪璇雨
公司的业务涉及到统计图的有很多,最近一直echarts里面踩各种坑,下面这篇文章主要给大家介绍了关于echarts地图设置背景图片及海岸线的相关资料,需要的朋友可以参考下
1、地图设置背景图片
// data
domImg: require('@/assets/images/largescreen/nation/map_bg.png'),
// js 渲染地图之前
var domImg = document.createElement("img");
domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px";
domImg.src = that.domImg;
// js 渲染地址时，在地图配置项geo中itemStyle
normal: {
areaColor: {
type: "pattern",
image: domImg, //配置图片
repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
},
}
2、地图外部多层轮廓线
首先来看单层加粗外边框，其实很简单。咱们看一下效果
// 在地图配置项series中添加样式，效果如下图
itemStyle: {
normal: {
areaColor: '#3075b2',
borderColor: '#4c99f9',
borderWidth: 1
},
emphasis: {
areaColor: '#01215c'
}
}
// 在地图的配置项geo中设置，效果如下图
itemStyle: {
normal: {
areaColor: '#01215c',
borderWidth: 5,//设置外层边框
borderColor:'#9ffcff',
}
}
在地图配置项series、geo中设置边框，单独设置就是上图所示。一起设置如下图，中间边框细，外轮廓边框粗的效果。
外轮廓加投影就是在 geo中添加 shadowColor设置，以及偏移shadowOffsetX、shadowOffsetY、shadowBlur。
如果想要多层外轮廓，就是在geo设置多个对象。
// 通过偏移，缩放来实现多层外轮廓的效果
this.option.geo = [
{
// 主图
map: map,
zlevel: 0,
zoom: 1.2, //当前视角的缩放比例
roam: false, //是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderColor: "rgba(141, 199, 255,1)",
borderWidth: 1,
areaColor: {
type: "pattern",
image: domImg, //配置图片
repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
},
},
emphasis: {
areaColor: "#2d9eff", //悬浮区背景
shadowColor: "rgba(20, 113, 255,1)",
shadowOffsetX: -2,
shadowOffsetY: 5,
shadowBlur: 10,
},
},
},
//第一层投影
{
map: map,
zlevel: -1,
zoom: 1.22, //当前视角的缩放比例
roam: false, //是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderJoin: "round",
borderColor: "rgba(176,228,252,1)",
borderWidth: 3,
areaColor: "rgba(133,188,232,1)",
shadowColor: "rgba(133,188,232,.7)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25,
},
emphasis: {
show: false,
},
},
},
// 第二层投影
{
map: map,
zlevel: -2,
zoom: 1.2, //当前视角的缩放比例
roam: false, //是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderJoin: "round",
areaColor: "rgba(30,49,105,1)",
shadowColor: "rgba(30,49,105,1)",
shadowOffsetX: -5,
shadowOffsetY: 6,
},
emphasis: {
show: false,
},
},
},
}
3、地图海岸线
在echarts中regions是对特定的区域配置样式，opacity中0的时候不会绘制该图形，所以根据regions配置项来清除一部分图形。这样一来，直接在一个map上是不能实现海岸线效果的。那就需要两个div地图来实现海岸线效果。一层map是顶层的，完整数据的地图，一层是去掉海岸想相关数据的地图层。
// 首先把一部分图形隐藏
regionsOption:[
{
name: "北京市",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
......
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
]完整的地图数据我是从DataV.GeoAtlas下载的。
对某些省份图形的隐藏之后，发现，辽宁、广西在海岸线中只占一部分，就不能根据隐藏图形来实现了。但是可以修改地图绘制的经纬度，把辽宁、广西的一部分经纬度绘制去掉就可以得到下图效果。 下载海岸线除去辽宁广西部分经纬度json数据
4、地图中高亮显示有数据的城市
数据高亮显示，在地图配置项series中data中设置itemStyle.areaColor。还可以加scatter，effectScatter都可以，根据需求来定。
// series-map.data.itemStyle地图数据高亮显示
var data = [
{ name: '天津', value: 4075, itemStyle: {areaColor: '#faa'} },
{ name: '湖北', value: 500, itemStyle: {areaColor: '#faa'} }
];
// series-effectScatter带有涟漪特效动画的散点（气泡）图
// this.convertData() 的数据格式：根据获取地图的数据，筛选出和data对应的数据，格式：[{name: 'name', value: 'value'}]
{
type: "effectScatter",
coordinateSystem: "geo",
data: this.convertData(),
// geoIndex:1,
symbolSize: function (val) {
return 10;
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "top",
show: true,
color: "#fff",
fontSize: 10,
fontWeight: 800,
},
},
itemStyle: {
normal: {
color: "#fdfbcc",
shadowBlur: 10,
shadowColor: "#fdfbcc",
},
},
zlevel: 1,
},
5、滚动高亮轮播
根据dispatchAction来设置地图的配置项，和定时器相结合来实现滚动高亮显示
// 设置鼠标移入移出地图以及点击地图
mounted() {
this.$nextTick(() => {
this.initEcharts();
let that = this;
this.chart.on("click", this.echartsMapClick);
this.chart.on("mouseover", this.echartsMapMouseover);
this.chart.on("mouseout", this.echartsMapMouseout);
})
}
// 地图鼠标移入事件
echartsMapMouseover() {
clearInterval(this.tooltipAutoplay);
},
// 地图鼠标移出事件
echartsMapMouseout() {
this.setTooltipAutoplay();
},
// 动态显示tooltip
setTooltipAutoplay() {
clearInterval(this.tooltipAutoplay);
var index = 0; //播放所在下标
var itemIndexList = new Array(this.mapDataList.length); //固定数组长度为3
for (var i = 0; i < itemIndexList.length; i++) {
itemIndexList[i] = i;
}
this.tooltipAutoplay = setInterval(() => {
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: itemIndexList,
});
this.chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.tooltipAutoplayIndex,
});
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: this.tooltipAutoplayIndex,
});
this.tooltipAutoplayIndex++;
if (this.tooltipAutoplayIndex >= this.mapDataList.length) {
this.tooltipAutoplayIndex = 0;
this.setTooltipAutoplay();
}
}, 6666);
},
总结
到此这篇关于echarts地图设置背景图片及海岸线的文章就介绍到这了,更多相关echarts地图设置背景图片 海岸线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
微信小程序开发中选择地理位置就需要通过官方文档API去判断用户是否授权地理位置,用户开启授权后可直接获取地理位置,下面这篇文章主要给大家介绍了关于微信小程序获取当前位置的详细步骤,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于js如何在字符串中查找某个字符的位置的相关资料,在JavaScript中我们经常需要对字符串进行各种操作,包括查找包含特定字符的字符串,需要的朋友可以参考下2023-11-11
在本篇内容里小编给大家整理了关于解决JS跨域请求的问题知识点，需要的朋友们参考学习下。2018-12-12
在JavaScript中查找字符串中最长单词的三种方法(推荐)
这篇文章主要介绍了在JavaScript中查找字符串中最长单词的三种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了如何用JS实现简单的数据监听，对数据监听感兴趣的同学，可以参考一下2021-05-05
今天在浏览网页时无意中发现了这段JS劫持搜索引擎代码。劫持搜索引擎正常搜索过来的流量，这是黑帽seo常用的劫持方法。特意解密出来供大家了解其劫持原理。感兴趣的朋友一起学习学习吧2015-09-09
JS控件的生命周期跟其他平台UI的生命周期类似，但是又有自己的特点，我们只有将控件的生命周期划分清晰，所有的控件编写、mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理2012-10-10
能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。2010-10-10
这篇文章主要介绍了webpack4.x打包过程详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了微信小程序实现笑脸评分功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论