geo组件中添加roam和zoom对散点图的影响(已解决)

最新推荐文章于 2024-10-29 19:54:53 发布

走_开

最新推荐文章于 2024-10-29 19:54:53 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts geo组件 web前端文章标签： geo组件中添加roam和zoom对散点图的影响

本文链接：https://blog.csdn.net/believet93/article/details/103360826

当geo组件设置roam为true或使用zoom放大时，散点图坐标出现错位。文章记录了该问题并提供了解决方案，包括监听geo的roam事件来避免坐标错位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在配置geo组件的roam=true或者zoom放大倍数（不等于1）后，窗口放大缩小会是散点图的坐标错位。贴上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
	<script src="china.js"></script>
	<style>
        body {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
  geo: {
    m