九日 2022-11-14 15:56 采纳率: 66.7%
浏览 32
已结题

echarts 地图散点标注问题

echarts 地图散点标注,求指点,感激不尽,谢谢!

问题:散点图坐标显示名称错误,每次显示的都是坐标的y坐标的数值,而不显示name下的名称!{name: '超市发清河店',value: [116.350155, 40.036564]}

请问为什么我设置的散点图总是调用地图的第二个坐标,而不是调用name里边的数据啊?求指点,请问究竟应该怎样写,谢谢

var geoCoordMap = [{
                    name: '雍和宫',
                    value: [116.423633,39.953628]
                }, {
                    name: '圆明园',
                    value: [116.309804,40.012658]
                }, {
                    name: '故宫',
                    value: [116.403414,39.924091]
                }]


img

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/110108.js"></script>

</head>

<body>
    <div>

        <a class="btn btn-success btn-sm">海淀区</a>

        <div class="x-body">
            <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
            <div id="main" style="width: 949.75px;height:450px;"></div>
        </div>

        <script>
            //获取div
            var myChart = echarts.init(document.getElementById('main'));
            //获取geo地图
            $.get("js/beijing.js", function(haidianJson) {
                //注册地图组件
                echarts.registerMap("haidian", haidian);

                //散点坐标
                var geoCoordMap = [{
                    name: '雍和宫',
                    value: [116.423633,39.953628]
                }, {
                    name: '圆明园',
                    value: [116.309804,40.012658]
                }, {
                    name: '故宫',
                    value: [116.403414,39.924091]
                }]


                var option = {
                    geo: { //地图坐标组件
                        type: 'map', //数据类型
                        map: 'haidian', //展示地图的名称
                        roam: true, //开启平移缩放
                        zoom: 1, //初始化地图缩放比例
                        center: [116.32581, 39.896792], //地图居中位置显示
                        label: {
                            show: "true", //显示标签
                            color: "#ff6600",
                            fontSize: "10",
                            itemStyle: {
                                areaColor: "#ff6600", //区域块元素
                            }

                        }

                    },
                    //散点图
                    series: [{
                        type: "scatter", //图标类型
                        //系列中的数据内容数组
                        data: geoCoordMap,
                        coordinateSystem: "geo", //散点图坐标以geo方式显示气泡点 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
                        symbolSize: 15, //点大小
                        label: { //点显示数据
                            show: "true"
                        },
                        itemStyle: {
                            color: "blue" //散点数据文字颜色
                        }

                    }]


                };
                myChart.setOption(option);
            })
        </script>
    </div>


</body>

</html>

  • 写回答

3条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2022-11-14 18:46
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月30日
  • 已采纳回答 11月22日
  • 修改了问题 11月15日
  • 创建了问题 11月14日