一、背景
据说90%的可视化是用Echarts开发，没错，笔者也没例外，在新的开发项目中，遇到了这个开发神器Echarts，想要的功能就是在省份上显示动态效果图，比如涟漪。原来的功能已有范围视觉组件visualMap。
二、需求明确
在已有的地图组件中完成涟漪的开发，开发之前例行动作，看看别人怎么开发的 😃 。
结果就是大同小异，地图用GEO类型，然后需要的地理位置添加effectScatter类型组件。
三、开发步骤
- 整改原来的地图为geo类型
geo: {
// 引入数据名
map: 'china',
show: true,
// 关闭拖拽
roam: true,
zoom: 1.7,
label: {
show: true,
// position: ['50%', '50%'],
position: 'left',
distance: 100,
offset: [-3000, -100],
color: '#f1e3e3',
align: 'left'
},
// 组件距离容器的距离
top: '50'
},
- 添加多个series初始配置
{
name: '项目数据',
// 将项目数据和第0个geo配置关联在一起
geoIndex: 0,
type: 'map',
zlevel: 20
},
{
name: '严重告警',
// 配置散点的坐标数据
type: 'effectScatter',
colorBy: 'data',
// visualMap: false,
// 指明涟漪使用的坐标系统 geo的坐标系统
coordinateSystem: 'geo',
symbol: 'circle',
// 图例大小
symbolSize: 8,
// 设置涟漪动画缩放的比例
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
zlevel: 10
}],
- 测试涟漪数据
const dataOption = {
series: [
{
data: originalMapData
},
{
data: [
{
name: '上海',
value: [121.47, 31.26]
},
{
name: '北京',
value: [116.405285, 39.904989]
},
{
name: '四川',
value: [104.065735, 30.659462]
},
{
name: '青海',
value: [97.180921, 35.802832]
}
],
color: '#174c68'
}
]
}
四、结果
翻车了。😦
- 首先出现的是
无涟漪效果，怀疑是地理位置没给对，几个对比下来发现没问 - 上海位置的涟漪出现了，各种排查，现象是有项目的
未出现涟漪，没有项目出现涟漪，怀疑是视觉组件覆盖了 - 更改了各自的在zlevel，依旧没有效果，索性不改了，改改颜色吧
- 颜色也改不动，感觉被限制了
- 决定换个视觉组件类型，原来的是分段型，改为连续型试试
- 换颜色也不行，搜各种资源，发现有说seriesIndex属性要配置为geo数据属性，不配置的话，会覆盖其它组件的样式
- 终于它来了，出现了
五、visualMap配置项
visualMap: [
{
type: 'piecewise',
bottom: 10,
// min: 0,
// max: 200,
pieces: [
{ gte: 40, label: '40个以上' }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 30, lte: 39, label: '30-39个' },
{ gte: 20, lte: 29, label: '20-29个' },
{ gte: 10, lte: 19, label: '10-19个' },
{ gte: 4, lte: 9, label: '4-9个' },
{ lte: 3, label: '1-3个' } // 不指定 min，表示 min 为无限大（-Infinity）。
],
inRange: {
// 渐变颜色，从小到大
color: [
'#8abcd1',
'#5cb3cc',
'#66a9c9',
'#2f90b9',
'#1781b5',
'#176287'
]
},
// 颜色的设置 dataRange
textStyle: {
fontSize: this.screenHeight / 60
},
splitList: [
{ start: 0, end: 150000 }
],
// color: ['rgb(50,88,124)'],
zlevel: 10,
// 保证不覆盖其它样式,包含涟漪效果
seriesIndex: 0
}
],
