路径图:用于带有起点和重点信息的线数据的绘制,主要用于地图上的航班,路线的可视化。支持二维的直角坐标系和地理坐标系。我们先来看看官方案例:https://echarts.apache.org/examples/zh/editor.html?c=geo-lines。下面我们来详细介绍一下,主要的属性。效果图如下:
series 是要绘制的地图的主体。series 是一个数组,也就是说可以有多个数据进行绘制。这里有两个,一个是两个城市的连线,一个是对两个城市进行高亮显示。其中的 type 是很重要的参数,主要有饼图、条形图、线、地图等等。
首先介绍带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
effectScatter
{
name: 'city',
type: 'effectScatter',
coordinateSystem: 'geo', // 选用坐标系
rippleEffect: {
brushType: 'stroke' // 波纹的绘制方式
},
data: convertData1(data)
},
lines
{
name: 'rode',
type: 'lines',
coordinateSystem: 'geo',
data: convertData(data),
effect: { // 线特效的配置
show: true,
period: 6, // 特效动画的时间,单位为 s
trailLength: 0, // 特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。
},
lineStyle: {
normal: {
color: '#389BB7',
width: 1,
opacity: 0.4, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
curveness: 0.2 // 边的曲度,支持从 0 到 1 的值,值越大曲度越大。
}
}
},