帮我做一个基于echarts的可视化气泡图,所需数据如下: 年份 总GDP(万元) 人均GDP(元) 2018 400 8333 2019 420 8653 2020 440 8974 2021 460 9295 2022 480 9615 自行发挥,做出气泡图
时间: 2024-02-27 17:07:24 浏览: 158
好的,我可以为您提供一个基于 Echarts 的可视化气泡图。以下是完整的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可视化气泡图</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
</head>
<body>
<!-- ECharts 容器 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<!-- JavaScript 代码 -->
<script type="text/javascript">
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
title: {
text: '可视化气泡图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['人均GDP(元)']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} 万元'
}
}],
yAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} 元'
}
}],
series: [{
name: '人均GDP(元)',
data: [
[400, 8333, 2018],
[420, 8653, 2019],
[440, 8974, 2020],
[460, 9295, 2021],
[480, 9615, 2022]
],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[0]) / 5;
},
label: {
show: true,
formatter: function (param) {
return param.value[2];
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: 'rgba(120, 36, 50, 0.5)'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
您可以将上面的代码复制到一个 HTML 文件中并在浏览器中运行,就可以看到可视化气泡图。同时,您也可以根据自己的需求修改代码中的数据和配置项来定制自己的气泡图。
阅读全文