HarmonyOS鸿蒙Next花瓣地图中结合echarts画飞线图问题

HarmonyOS鸿蒙Next花瓣地图中结合echarts画飞线图问题 我在使用花瓣地图结合echarts，在地图上显示飞线图，根据 数据可视化-JavaScript-地图服务 | 华为开发者联盟 (huawei.com) 指南上的内容，我使用了 echarts 和 echarts-extension-hwmap.min.js， 地图正常显示，但是飞线图却无法显示，不知道问题出在哪里，请大家帮忙看一下，指出错误，小弟感激涕零，整个代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key="></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js/echarts-extension-hwmap.min.js"></script>
    <style>
        #map {
            height: 800px;
            width: 100%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>
<script>
    function initMap() {
        const chart = echarts.init(document.getElementById("map"));
        const option = {
            hwmap: {
                center: [116.395645, 39.929986],
                zoom: 4,
                resizeEnable: true,
                renderOnMoving: false,
                language: 'en',
                echartsLayerInteractive: true,
                largeMode: false
            },
            series: [{
                type: 'lines',
                coordinateSystem: 'hwmap',
                effect: {
                    show: true,
                    period: 4, 
                    trailLength: 0, 
                    symbol: 'arrow', 
                    symbolSize: 5, 
                    color: 'rgb(0,0,255)', 
                },
                lineStyle: {
                    show: true,
                    width: 1, 
                    opacity: 1, 
                    curveness: 0.3, 
                    color: 'rgb(255,0,0)', 
                },
                data: [
                    {
                        coords: [[110.3893, 19.8516], [127.9688, 45.368]], // 海南到黑龙江
                    }
                ],
            }]
        };
        option && chart.setOption(option);
    }
</script>

更多关于HarmonyOS鸿蒙Next花瓣地图中结合echarts画飞线图问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next花瓣地图中结合echarts画飞线图问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next的花瓣地图中结合ECharts绘制飞线图，首先需要确保ECharts库已正确集成到项目中。然后，通过ECharts的geo和lines系列配置，将飞线图与花瓣地图的地理坐标系统结合。具体步骤包括：

  1. 配置geo组件以匹配花瓣地图的地理数据；
  2. 使用lines系列定义飞线的起点和终点坐标；
  3. 通过visualMap组件设置飞线的颜色和宽度等视觉属性。

确保数据格式正确，以实现飞线图在地图上的动态展示。

回到顶部