前端 地图增加边框线_echarts map地图设置外边框或者阴影
最近要实现一个地图的效果,地图外有个外边框,配置项无此配置,在网上看到的效果,还需要积分下载,顿时感觉很不好,互联网之所以发展到如此,个人感觉是因为 "分享" 。找不到就自己实现咯。
换个思路实现起来也很简单，比如设计图是这个样子：
你觉得边框不好实现，但是你会不会实现下面两种样子
如果你说你都会，那么问题就解决了，两个重叠一下就是你想要的效果(center，aspectScale和zoom需要一样)，附上关键代码：
geo: {
map: 'china',
center: [112.194115019531, 23.582111640625],
zoom: 12,
aspectScale: 1, //长宽比
label: {
normal: {
show: true,
textStyle: {
fontSize: 16,
color: '#ccc'
}
},
emphasis: {
show: false,
textStyle: {
color: '#ccc'
}
}
},
roam: false,
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 5,
areaColor: '#272235',
fontWeightL: 700,
/* shadowBlur:20,
shadowColor: '#fff',*/
},
emphasis: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3f15d6' // 0% 处的颜色
}, {
offset: 1, color: '#d243cd' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
series: [
{
type: 'map',
map: 'china',
center: [112.194115019531, 23.582111640625],
zoom: 12,
geoIndex: 1,
aspectScale: 1, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
fontSize: 16,
color: '#ccc'
}
},
emphasis: {
show: false,
textStyle: {
color: '#ccc'
}
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#272235',
borderColor: '#fff',
fontWeightL: 700,
borderWidth: 1
},
emphasis: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3f15d6' // 0% 处的颜色
}, {
offset: 1, color: '#d243cd' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
data: []
}
]
如果想实现阴影就把底层map的边框改成阴影
本篇如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点
前端 地图增加边框线_echarts map地图设置外边框或者阴影相关推荐
- echart 边框线_echarts 饼图给外层加边框
在series里面再加一个圆,设置他的位置和边框大小即可. data() { return { option: { title: { show: true, text: '项目总数', subtext ...
- echaer 地图_echarts Map(地图) 不同颜色区块显示
echarts Map(地图) 不同区块显示 这里以重庆地图为例 配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, ...
- echarts地图文字重叠解决方案_Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { '大洋洲' : [265, 0], }, ...
- html2canvas边框线,html2canvas如何实现dashed虚线边框？
本文和大家分享的主要是前端中html2canvas相关内容,希望通过本文的分享对大家学习web前端有所帮助. html2canvas是一个将html元素生成canvas的库,绘制的canvas大部分样 ...
- Java中表头的边框置为实线,div的边框线为实线怎么样设置
一.边框属性简单介绍 1.边框属性为border 2.边框兼容好的重用样式有: none : 无际框 solid 实线边框 dashed 虚线边框 3.div标签设置边框线为实线,那么就是要borde ...
- html隐藏input边框线,css如何去掉input的边框？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css去掉inp ...
- 如何修改控件边框的样式_Excel如何设置表格边框样式，记住这几个关键属性就懂了...
Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...
- css修饰边框为虚线,css如何设置虚线边框css虚线样式？css设置虚线边框的方法示例...
首页 >web前端>css教程>正文 css如何设置虚线边框?css设置虚线边框的方法示例 原创2018-10- 在网页布局中,有时候为了整体网页的美观可能需要设置虚线边框,那么虚线 ...
- 表格的边框如何做到和EXCEL的外边框为粗线，内部为细线的效果
显示态:结果不正确. 解决办法: 在循环数据的下一行空白行设置上边框,如图一对第6行进行设置
- echarts地图文字重叠解决方案_echarts map 阴影（重叠）
export const dfOption = { tooltip: { formatter: function(params, ticket, callback) { return params.n ...
最新文章
- angularJs项目实战！04：angularjs的性能问题
- 主流or消亡？2016年大数据发展将何去何从
- 变动性算法源代码分析与使用示例（copy_backward、 transform、 replace_copy_if 等）
- unity 常用函数
- 1908元？iPhone SE 3价格大幅下调，网友：这个价格我冲了
- 充满艺术范儿！艺术感在线的界面欣赏
- multiprocessing python_一行 Python 代码实现并行
- python中对象的特性_Python深入学习之对象的属性
- R语言 神经网络与深度学习（二）
- http接口返回对象的方法
- js layui 模板属性 添加_layui模板引擎如何使用 - layim
- 常见的 360° 全景视频格式介绍及播放方式
- 计算机和网络之间有个感叹号,电脑连接网络显示感叹号,教你电脑连接网络显示感叹号怎么办...
- rufus制作u盘启动
- Android—调用高德地图显示定位蓝点
- arduino旋转编码器控制步进电机
- EAUML日拱一卒-微信小程序实战：位置闹铃 (6)-播放音频
- 到底什么是JWT技术？
- J2SE和J2EE的比较
- Eclipse的安装以及环境配置