首先要对上一篇最后的那个实现地图叠加做一下说明,其实那只是在geo地图上加的一层对geo的装饰(先这样说一下,后面我再进行补充),然后在series里我们可以进行多种比如lines这些来修饰geo地图。然后说一下我的标题修改,如图
可以注意到,在我的模块2的飞线图这,我把它做了一个样式,样式的代码如下
<div style="width: 100%;display: flex;"> <div style="width: 33%;text-align: left;flex: auto;"> <dv-decoration3 style="width:200px;height:50px;" /> </div> <div style="width: 33%;text-align: center;font-size: 20px;vertical-align: bottom;color: #7acaec;padding-top: 10px;"> 在线设备3/11 </div> <div style="width: 33%;flex: auto;text-align: right;"> <dv-decoration3 style="width:200px;height:50px;float: right;" /> </div> </div> <div style="height: 100%;"> <div style="height: 90%;width: 100%;" class="map"> <div ref="chart" style="width: 100%;height: 65vh;"></div> </div>
应该能清晰的知道代表什么意思,这里有一点以前我没有注意到,就是使用flex时,一定要进行display:flex,不然flex的效果显示不了。然后这里还需要注意text-align这个东西,效果就看上面的图就行。
今天我面临4个问题
1.在不同分辨率屏幕里,大屏里组件显示不一致,且可能不能完全显示大屏
2.解决地图跟随问题,
3.解决地图标点问题,
4.如何在标点的地图上实现飞线功能。
首先进行解决1问题,我们直接把组件里的高度,宽度换成百分比或百分比的单位即可,这样它就会自适应屏幕大小,百分比单位直接搜索css单位即可(大概吧),这里我列出几个常用的vh高度百分比,vw宽度,rpx等……
然后解决问题2,这里你去网上搜,一堆,基本都是推荐在geo里加上roam:true即可。这里有点小问题,我还在解决。
问题3,我使用的方法描述如下:
我使用的是svg路径数据法(这里我本来想要使用base64方法的,但是可能是我引入的图片有问题,它不能正确显示在我的飞线上,所以我抛弃了它,如果我后面方法有问题,你们可以去看看这个方法好用不),这是是什么方法呢?就是在svg文件里找到 <path>
或 <polygon>
, <polyline>
, <circle>
, <ellipse>
, <rect>
等元素的 d
属性。这个属性包含了路径数据。这里我的做法是去找到自己想要的图片,然后把它的svg数据直接给al读取,让al告诉你svg的路径数据,然后你直接引入即可,代码如下
let option = {
series: [
{
type: 'scatter',
data: [/* 你的数据点 */],
symbol: 'path://M511.988 511.984C405.943314 511.984 319.994 440.30624 319.994 351.989S405.943314 191.994 511.988 191.994s191.994 71.67776 191.994001 159.995S618.032686 511.984 511.988 511.984m0-511.984C299.898628 0 128 152.827224 128 341.301334c0 140.667604 213.689322 490.736664 322.22993 651.499641 28.031124 41.5987 95.485016 41.5987 123.51614 0C682.222681 832.037999 895.976001 481.968938 895.976001 341.301334 895.976001 152.827224 724.013375 0 511.988 0',
symbolSize: 50 // 根据需要调整大小
}
]
};
这样就解决了自定义图标问题。
问题四,解决飞线我们采用的是echarts自带的lines,这里介绍一下它(详情去官网查配置手册)
路径图
用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。
ECharts 2.x 里会用地图上的 markLine
去绘制迁徙效果,在 ECharts 3 里建议使用单独的 lines
类型图表
具体代码如下
{
name: '飞线',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,//单独放一个层
effect: {
show: true,
period: 5,
trailLength: 0.5,
color: '#298093',
symbol: 'arrow',
symbolSize: 8
},
lineStyle: {
normal: {
color: '#6ad3ea',
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: linesData
}
这里我来介绍一下都有什么用,name,type不用多说,coordinateSystem是用于指定我飞线的坐标系统的,为我设置的geo地图坐标系统;zlevel是层级,这里设为2是为了防止设置的位于同个层的其它系列的图形,和动画的标签也会产生不必要的残影。effect设置飞线上的图标样式arrow是箭头样式。trailLength是设置特效尾际长度。lineStyle设置飞线样式,opacity设置透明度,curveness设置边的曲度,支持从 0 到 1 的值,值越大曲度越大。当然这里最主要的还是data数据的输入,下面是linesData的数据,代码如下
const centerPoint = [{name:'',value:[112.9000,28.112]}];
const linesData = pointData.map(point => ({
fromName: point.name,
toName: centerPoint[0].name, // 修改这里
coords: [point.value, centerPoint[0].value] // 修改这里
}));
这里最最主要的是coords这句,默认为 false,
只能用于绘制只有两个端点的线段,线段可以通过 lineStyle.curveness 配置为曲线。记住名字不重要,重要的coords里的内容,设置了两点的坐标。
OK,这里结束datav的学习。