漏刻有时数据可视化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',//effectScatter
                    coordinateSystem: '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]);