漏刻有时数据可视化Echarts组件开发(45)机场流程导航线和指示点的开发记录

在这里插入图片描述

路径线

ECharts中的路径线是指用于连接起点和终点的线。在ECharts中，路径图主要用于带有起点和终点信息的线数据的绘制，如地图上的航班、路线等。路径线可以用于展示数据点之间的连接关系，以及数据点之间的相对位置。

{//路径图name: '路线图',type: 'lines',coordinateSystem: 'geo',geoIndex: 0,emphasis: {label: {show: false}},polyline: true,lineStyle: {color: '#ef3903',width: 0//线路},effect: {show: true,period: 8,color: '#1f59bc',constantSpeed: 20,trailLength: 0,symbolSize: [12, 30],symbol:'path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z'},z: 100,data: [{effect: {color: '#ef3903',constantSpeed: 100,delay: 0},coords: [[165.7421790106007, 272.62656803886927],[234.20090512367491, 236.59565955830394],[289.4482981272085, 253.4100835159011],[359.1080545229682, 260.6162652120142],[400.54359927561836, 261.2167803533569],[475.00747680212015, 221.58278102473503],[558.4790814487633, 173.54156971731453]]}]}

散点图

ECharts的散点图是一种常用的数据可视化图表类型，用于展示两个或多个维度的数据分布情况。散点图通过在坐标系中绘制数据点的位置来表示数据的关系。它通常用于探索数据集中的变量之间的关系，以及识别任何潜在的趋势或异常值。

      {//散点图name: "商业区",type: 'scatter',//effectScattercoordinateSystem: 'geo',geoIndex: 0,symbol: 'pin',//symbolSize: [30, 40],//固定大小会因地图缩放出现坐标偏移symbolSize: function (params) {return 30;},itemStyle: {color: '#ac529a',opacity: 1},label: {show: true,position: 'bottom',color: '#fff',backgroundColor: '#000',borderColor: '#000',padding: [8, 5, 5, 5],borderRadius: 5,formatter: function (d) {//console.log(d.value[3]);return d.value[3];}},encode: {//维度编码tooltip: [3]//tooltip中显示那个纬度},data: [[164.048726312014, 129.25291080424032, 20, '麦当劳'],[111.0953011484099, 233.59308385159017, 20, '肯德基'],[143.52311878091874, 219.180720459364, 20, '老娘舅']]},

在地理坐标系（geo）上，把某个点的经纬度坐标转换成为像素坐标：

// [128.3324, 89.5344] 表示 [经度，纬度]。
// 使用第一个 geo 坐标系进行转换：
chart.convertToPixel('geo', [128.3324, 89.5344]); // 参数 'geo' 等同于 {geoIndex: 0}
// 使用第二个 geo 坐标系进行转换：
chart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);
// 使用 id 为 'bb' 的 geo 坐标系进行转换：
chart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);