以下是使用HTML绘制气泡图的示例代码，展示了15个国家的GDP和人口之间的关系：
```html
<!DOCTYPE html>
<html>
<head>
<title>Bubble Chart Example</title>
<style>
.chart {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
}
.chart .country {
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #0077CC;
opacity: 0.8;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.chart .country:hover {
transform: scale(1.5);
opacity: 1;
}
.chart .country[
data-country="China"] {
left: 20%;
top: 50%;
width: 50px;
height: 50px;
}
.chart .country[
data-country="
India"] {
left: 40%;
top: 30%;
width: 30px;
height: 30px;
}
.chart .country[
data-country="United States"] {
left: 60%;
top: 20%;
width: 40px;
height: 40px;
}
.chart .country[
data-country="
Indonesia"] {
left: 70%;
top: 50%;
width: 20px;
height: 20px;
}
.chart .country[
data-country="Pakistan"] {
left: 30%;
top: 60%;
width: 15px;
height: 15px;
}
.chart .country[
data-country="Brazil"] {
left: 50%;
top: 70%;
width: 25px;
height: 25px;
}
.chart .country[
data-country="Niger
ia"] {
left: 80%;
top: 70%;
width: 18px;
height: 18px;
}
.chart .country[
data-country="Bangladesh"] {
left: 10%;
top: 20%;
width: 12px;
height: 12px;
}
.chart .country[
data-country="Russ
ia"] {
left: 30%;
top: 10%;
width: 35px;
height: 35px;
}
.chart .country[
data-country="Japan"] {
left: 60%;
top: 50%;
width: 28px;
height: 28px;
}
.chart .country[
data-country="Mexico"] {
left: 30%;
top: 40%;
width: 22px;
height: 22px;
}
.chart .country[
data-country="Philippines"] {
left: 80%;
top: 40%;
width: 14px;
height: 14px;
}
.chart .country[
data-country="Ethiop
ia"] {
left: 70%;
top: 20%;
width: 16px;
height: 16px;
}
.chart .country[
data-country="Egypt"] {
left: 50%;
top: 10%;
width: 30px;
height: 30px;
}
.chart .country[
data-country="Vietnam"] {
left: 40%;
top: 70%;
width: 18px;
height: 18px;
}
</style>
</head>
<body>
<div class="chart">
<div class="country"
data-country="China" title="China GDP: $14.14T, Population: 1.39B"></div>
<div class="country"
data-country="
India" title="
India GDP: $2.94T, Population: 1.34B"></div>
<div class="country"
data-country="United States" title="United States GDP: $21.44T, Population: 0.33B"></div>
<div class="country"
data-country="
Indonesia" title="
Indonesia GDP: $1.15T, Population: 0.27B"></div>
<div class="country"
data-country="Pakistan" title="Pakistan GDP: $0.31T, Population: 0.22B"></div>
<div class="country"
data-country="Brazil" title="Brazil GDP: $2.05T, Population: 0.21B"></div>
<div class="country"
data-country="Niger
ia" title="Niger
ia GDP: $0.45T, Population: 0.20B"></div>
<div class="country"
data-country="Bangladesh" title="Bangladesh GDP: $0.31T, Population: 0.16B"></div>
<div class="country"
data-country="Russ
ia" title="Russ
ia GDP: $1.64T, Population: 0.14B"></div>
<div class="country"
data-country="Japan" title="Japan GDP: $5.15T, Population: 0.13B"></div>
<div class="country"
data-country="Mexico" title="Mexico GDP: $1.27T, Population: 0.13B"></div>
<div class="country"
data-country="Philippines" title="Philippines GDP: $0.31T, Population: 0.10B"></div>
<div class="country"
data-country="Ethiop
ia" title="Ethiop
ia GDP: $0.10T, Population: 0.10B"></div>
<div class="country"
data-country="Egypt" title="Egypt GDP: $0.30T, Population: 0.10B"></div>
<div class="country"
data-country="Vietnam" title="Vietnam GDP: $0.24T, Population: 0.10B"></div>
</div>
</body>
</html>
```
上述代码中，我们使用了一个包含15个国家的气泡图。每个国家都用一个带有 `country` 类名的 div 元素表示，同时使用 `
data-country` 属性指定了国家名称，`title` 属性指定了国家的GDP和人口信息。
我们通过CSS设置每个国家的位置、大小、颜色等属性，使它们按照GDP和人口之间的关系呈现出不同的大小和颜色。同时，我们还使用了 CSS 动画效果来使鼠标悬停在某个国家上时它放大并变得更加明显。
你可以将上述代码复制到一个 HTML 文件中并在浏览器中打开，以查看最终效果。
扫一扫
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
