📊 数据可视化交互展示

基于第2章内容的完整可视化实现

🎨 选择主题配色

未来15天最高气温和最低气温

📋 适合数据类型

时间序列数据、连续变化趋势、多个系列的对比分析

最高气温数据

最低气温数据

说明： 折线图用于显示数据随时间或其他连续变量的变化趋势。可以同时显示多条折线进行比较分析。

2013-2019财年阿里巴巴GMV

📋 适合数据类型

分类数据对比、离散数值比较、时间段统计

GMV数据（亿元）

说明： 柱形图用于比较不同类别的数值大小。适合展示离散数据的对比关系。

各商品种类的网购替代率

📋 适合数据类型

类别名称较长的分类数据、多个类别排名对比

替代率数据

说明： 条形图是柱形图的横向版本，特别适合类别名称较长或类别数量较多的情况。

物流公司费用趋势图

📋 适合数据类型

时间序列的累计数据、多个部分占总量比例的变化

公司A费用

公司B费用

公司C费用

说明： 堆积面积图显示各部分数据随时间的变化趋势，同时展示总量的变化和各部分的占比关系。

人脸识别的灰度直方图

📋 适合数据类型

连续数据的分布分析、频率统计、数据集中趋势观察

随机数据（10000个点）

分组数量

说明： 直方图用于展示数据的分布情况，显示数据在不同区间内的频率分布。

支付宝月账单报告

📋 适合数据类型

占比分析、部分与整体关系、分类数据的比例分布

消费类别占比

说明： 饼图用于显示各部分占总体的比例关系，适合展示分类数据的占比情况。

汽车速度与制动距离的关系

📋 适合数据类型

两个变量间的相关性分析、数据分布模式、异常值检测

速度数据（km/h）

制动距离（米）

说明： 散点图用于展示两个变量之间的关系，可以观察变量之间的相关性或分布模式。

2017年和2018年全国发电量统计

📋 适合数据类型

数据分布统计、异常值检测、多组数据比较、四分位数分析

2018年发电量

2017年发电量

说明： 箱形图展示数据的分布情况，包括中位数、四分位数、异常值等统计信息。

霍兰德职业兴趣测试

📋 适合数据类型

多维数据对比、能力评估、多指标综合评价

研究型(I)数据

艺术型(A)数据

社会型(S)数据

企业型(E)数据

传统型(C)数据

现实型(R)数据

说明： 雷达图用于展示多维度数据，适合比较多个对象在多个维度上的表现。

4个树种不同季节的细根生物量

📋 适合数据类型

实验数据统计、测量不确定性表示、多组数据均值比较

树种A数据（春季,夏季,秋季）

树种B数据（春季,夏季,秋季）

树种C数据（春季,夏季,秋季）

树种D数据（春季,夏季,秋季）

树种A误差（春季,夏季,秋季）

树种B误差（春季,夏季,秋季）

树种C误差（春季,夏季,秋季）

树种D误差（春季,夏季,秋季）

说明： 误差棒图展示数据的平均值和变异程度，用于表示测量的不确定性。
}, { xAxis: i + 0.15, yAxis: mean + error }, { xAxis: i - 0.15, yAxis: mean - error }, { xAxis: i + 0.15, yAxis: mean - error }, { xAxis: i, yAxis: mean - error }, { xAxis: i, yAxis: mean + error } ]; }) } }; }); charts.errorbarChart.setOption({ color: themes[currentTheme].chartColors.slice(0, 4), title: { text: '4个树种不同季节的细根生物量', left: 'center' }, tooltip: { trigger: 'item', formatter: function(params) { if (params.seriesName.includes('误差')) { // 误差棒tooltip const specie = params.seriesName.replace('误差', ''); const specieIndex = species.indexOf(specie); const seasonIndex = params.dataIndex; const mean = meansArrays[specieIndex][seasonIndex]; const error = errorsArrays[specieIndex][seasonIndex]; return `${specie} - ${seasons[seasonIndex]}
平均值: ${mean.toFixed(2)} g/m²
误差: ±${error.toFixed(2)} g/m²`; } else { // 柱形图tooltip const specie = params.seriesName; const specieIndex = species.indexOf(specie); const seasonIndex = params.dataIndex; const mean = meansArrays[specieIndex][seasonIndex]; const error = errorsArrays[specieIndex][seasonIndex]; return `${specie} - ${seasons[seasonIndex]}
平均值: ${mean.toFixed(2)} g/m²
误差: ±${error.toFixed(2)} g/m²`; } } }, legend: { data: species, top: 30 }, grid: { top: 80, bottom: 30 }, xAxis: { type: 'category', data: seasons, name: '季节', axisTick: { alignWithLabel: true } }, yAxis: { type: 'value', name: '生物量 (g/m²)', min: 0 }, series: allSeries }); } // 图表下载功能 function downloadChart(chartId) { const chart = charts[chartId]; if (!chart) { alert('图表未初始化，请稍后重试'); return; } try { // 获取图表数据URL const dataURL = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }); // 创建下载链接 const link = document.createElement('a'); link.download = `${chartId}_${new Date().getTime()}.png`; link.href = dataURL; // 触发下载 document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (error) { console.error('下载图表失败:', error); alert('下载图表失败，请检查浏览器兼容性'); } } // 图表下载功能 function downloadChart(chartId) { const chart = charts[chartId]; if (!chart) { alert('图表未初始化，请稍后重试'); return; } try { // 获取图表数据URL const dataURL = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }); // 创建下载链接 const link = document.createElement('a'); link.download = `${chartId}_${new Date().getTime()}.png`; link.href = dataURL; // 触发下载 document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (error) { console.error('下载图表失败:', error); alert('下载图表失败，请检查浏览器兼容性'); } } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { // 尝试加载ECharts if (typeof echarts !== 'undefined') { initCharts(); } else { // 如果CDN加载失败，使用备用方案 const script = document.createElement('script'); script.src = 'https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'; script.onload = initCharts; document.head.appendChild(script); } // 窗口大小变化时调整图表 window.addEventListener('resize', function() { Object.values(charts).forEach(chart => { if (chart) chart.resize(); }); }); });nction() { Object.values(charts).forEach(chart => { if (chart) chart.resize(); }); }); });nction() { Object.values(charts).forEach(chart => { if (chart) chart.resize(); }); }); });