deepseek绘制专业复杂数据图（可视化数据展示）

还不秃顶的计科生

已于 2025-03-09 16:25:42 修改

阅读量1.4k

点赞数 20

分类专栏： AI-deepseek 文章标签：人工智能

于 2025-03-06 13:13:30 首次发布

本文链接：https://blog.csdn.net/weixin_74009895/article/details/146067267

版权

AI-deepseek 专栏收录该内容

16 篇文章

订阅专栏

第一部分：使用deepseek生成html代码格式

帮我生成一个2025年环境治理的数据的html可视化数据图展示：

结果为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2025年环境治理数据看板</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
body { font-family: "Microsoft YaHei", sans-serif; margin: 20px; }
.dashboard { max-width: 1200px; margin: 0 auto; }
.chart-box {
height: 400px;
margin: 20px 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 20px;
}
.tabs { margin-bottom: 20px; }
.tab {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
margin-right: 5px;
}
.active { background: #409EFF; color: white; }
</style>
</head>
<body>
<div class="dashboard">
<h1>2025年环境治理数据看板</h1>

<div class="tabs">
<div class="tab active" οnclick="switchTab(0)">空气质量</div>
<div class="tab" οnclick="switchTab(1)">水质监测</div>
<div class="tab" οnclick="switchTab(2)">垃圾分类</div>
</div>

<div id="chart1" class="chart-box"></div>
<div id="chart2" class="chart-box"></div>
</div>

<script>
// 模拟数据
const envData = {
cities: ['北京', '上海', '广州', '成都', '西安'],
airQuality: {
pm25: [28, 25, 30, 32, 35],
goodDays: [345, 355, 338, 325, 315]
},
waterQuality: {
grade: ['Ⅱ类', 'Ⅲ类', 'Ⅱ类', 'Ⅲ类', 'Ⅳ类'],
cleanRate: [98, 95, 96, 92, 88]
},
waste: {
categories: ['可回收', '厨余', '有害', '其他'],
values: [45, 30, 5, 20]
}
};

// 图表配置
const chartConfigs = [
{ // 空气质量
title: '空气质量指数 (PM2.5年均值)',
type: 'bar',
data: envData.airQuality.pm25,
yName: 'μg/m³',
color: '#5470C6'
},
{ // 水质监测
title: '饮用水源达标率',
type: 'line',
data: envData.waterQuality.cleanRate,
yName: '达标率 (%)',
color: '#91CC75'
},
{ // 垃圾分类
title: '生活垃圾处理比例',
type: 'pie',
data: envData.waste.values,
labels: envData.waste.categories
}
];

// 初始化图表
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

function renderCharts(tabIndex) {
const config = chartConfigs[tabIndex];

// 主图表配置
chart1.setOption({
title: { text: config.title, left: 'center' },
tooltip: {},
xAxis: {
data: config.labels || envData.cities,
axisLabel: { rotate: 45 }
},
yAxis: { name: config.yName },
series: [{
type: config.type,
data: config.data,
itemStyle: { color: config.color },
areaStyle: config.type === 'line' ? {} : null
}]
});

// 副图表（饼图特殊处理）
if(tabIndex === 2) {
chart2.setOption({
title: { text: '垃圾分类组成', left: 'center' },
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '55%',
data: config.data.map((v, i) => ({
value: v,
name: config.labels[i]
})),
emphasis: { itemStyle: { shadowBlur: 10 } }
}]
});
} else {
chart2.setOption({
title: { text: '年度优良天数统计', left: 'center' },
xAxis: { data: envData.cities },
yAxis: { name: '天数' },
series: [{
type: 'bar',
data: envData.airQuality.goodDays,
itemStyle: { color: '#FAC858' }
}]
});
}
}

// 切换标签页
function switchTab(index) {
document.querySelectorAll('.tab').forEach((t, i) =>
t.classList.toggle('active', i === index));
renderCharts(index);
}

// 初始化显示第一个标签页
renderCharts(0);
</script>
</body>
</html>