echarts在百度地图上显示饼图 定位问题

发布于 2022-09-06 23:53:46 字数 5424 浏览 38 评论 0

echarts银土百度地图,想用地图坐标来定位饼图,但是实际效果还是根据像素定位显示了。所有饼图都重叠在了一起

clipboard.png

option:

const option = {
    // name:'pie-map',
    bmap: {
        center: [121.579317, 29.883219],
        zoom: 10,
        roam: true,
        mapStyle:{...}
    },
    series:[]
}

pieData.forEach(item => {
    option.series.push({
        type:'pie',
        radius:'15%',
        coordinateSystem: 'bmap',  // 使用地图坐标系
        center: item.center,
        data: item.value
    })
})

data:

[
    {
        "center": [
            121.40519,
            109.943418
        ],
        "name": "区域1",
        "value": [
            {
                "name": "A",
                "value": 2
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.40519,
            29.943418
        ],
        "name": "区域1",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 5
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.416688,
            29.867279
        ],
        "name": "区域2",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 8
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.525922,
            29.946423
        ],
        "name": "区域3",
        "value": [
            {
                "name": "A",
                "value": 5
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.519023,
            29.874294
        ],
        "name": "区域4",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.562717,
            29.878303
        ],
        "name": "区域5",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.606411,
            29.884315
        ],
        "name": "区域6",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.594912,
            29.935406
        ],
        "name": "区域7",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.598362,
            29.852244
        ],
        "name": "区域8",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.529372,
            29.79409
        ],
        "name": "区域9",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.854774,
            29.898343
        ],
        "name": "区域10",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    },
    {
        "center": [
            121.759338,
            29.805122
        ],
        "name": "区域11",
        "value": [
            {
                "name": "A",
                "value": 1
            },
            {
                "name": "B",
                "value": 2
            },
            {
                "name": "c",
                "value": 3
            }
        ]
    }
]

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文