echarts 地图功能 之光晕
一下从几个方面解释echarts地图的引用,以中国地图为例
主要地图需要引入文件
import 'echarts/map/js/china'
一.地图最基础的结构
先看一下效果
option的配置只需三行
option = { backgroundColor: '#013954', series: [{ type: 'map', map: 'china' }] }
或者更少
option = { backgroundColor: '#013954', geo: { map: 'china' } }
geo 指定map: 'china'就是一个地图了,series的地图默认会覆盖在上面
geo regions功能可以对特定的区域配置样式。
二、光晕效果的地图
方式1: 像上面说的geo指定map可以生成地图,那么如果把map地图的大小设置跟series的地图不一致,就会产生2个地图,利用这个特点可以实现地图重叠2D效果(我理解也算是光晕效果)
let option = { backgroundColor: '#09132c', // geo 指定map: 'china'就是一个地图了,series的地图默认会覆盖在上面 // geo regions功能可以对特定的区域配置样式。 geo: { map: 'china', zoom: 1.22, // 设置比例比sesies的大,出现外围地图叠加效果 emphasis: { // 高亮状态下的多边形和标签样式 label: { show: false }, itemStyle: { areaColor: '#00FFFF' } }, regions: [{ name: '南海诸岛', itemStyle: { normal: { opacity: 0, label: { show: false, color: '#009cc9' } } } }], itemStyle: { // 图形样式 areaColor: '#00FFFF', borderWidth: 2, borderColor: '#2AB8FF' } }, series: [{ type: 'map', map: 'china', zoom: 1.2, label: { show: true, color: '#fff' }, itemStyle: { // 图形样式 areaColor: '#274d68', borderWidth: 1, borderColor: '#2AB8FF', shadowColor: 'rgba(0, 10, 52, 1)', shadowBlur: 10 }, emphasis: { // 高亮状态下的多边形和标签样式 label: { show: false }, itemStyle: { areaColor: '#2AB8FF' } } }] }
方式2: 利用阴影的方式设置光晕
geo的配置 itemStyle: { // 图形样式 areaColor: '#00FFFF', borderWidth: 2, borderColor: '#2AB8FF', shadowColor: '#2AB8FF', shadowBlur: 5, shadowOffsetX: 5, shadowOffsetY: 6 }
方式3: 混合设置光晕
geo的配置重置 itemStyle: { // 图形样式 areaColor: '#00FFFF', borderWidth: 2, borderColor: '#2AB8FF', shadowColor: '#2AB8FF', shadowBlur: 10, shadowOffsetX: 1, shadowOffsetY: 2 }
效果图对比如下(按顺序)
额外注意:
南海诸岛样式重置,如果不处理会出现
......