首页 前端知识 利用AI让数据可视化

利用AI让数据可视化

2025-03-23 11:03:14 前端知识 前端哥 768 761 我要收藏

1. 从问卷星上下载一份答题结果。

序号用户ID提交答卷时间所用时间来源来源详情来自IP总分1、《中华人民共和国电子商务法》正式实施的时间是()。2、()可以判断企业在行业中所处的地位。3、()是指店铺内有销量的商品占店铺内所有商品的百分比,影响店铺权重。4、()类指标是电子商务数据监控的核心之一,包括访问电子商务网站的访客数、访问深度等数据指标。5、LEFT函数的语法为:=LEFT(text,[num_chars]),若text参数为"Success",num_chars参数为4,则=LEFT("Success",4)的返回结果是 ()。6、利用Excel进行数据的描述性统计分析,在“描述统计”对话框中不需要设置()的属性。7、某店铺30天内销售收入为40000元,销售成本为25000元,请问该店铺的毛利率为()。8、某企业2020年9月成交额为13658元,2020年8月成交额为12534元,2019年9月成交额为12342元,其2020年9月成交额环比增长率为()。9、某手机店铺上新一款ipone11PRO手机,这款产品共有金、灰、银、绿4种颜色,有64G、256G、512G三种配置,那么它的SPU是多少?()10、某网店当天的访客数为1000个,总浏览量为9000次,共有90位成交客户,总销售额为11700元,该网店当天的客单价为()。11、某网店最近一周有200名访客,其中40名访客点击浏览了某商品详情页,最终4人购买了该商品,那么该商品的成交转化率为()。12、频数分析时,()是用矩形的面积来表示频数分布情况的图形,且该图形上一般还会加上展现累积频率变化的趋势线。13、若要在Excel中计算A2到C2及B1到B10区域中数据的平均值,使用公式=AVERAGE(A2:C2 B1:B10)和公式=AVERAGE(A2:C2,B1:B10),下列说法正确的是()。14、若要统计客户数据表中女性的人数,可在Excel中使用下列哪个函数?()15、数据的集中趋势分析是用来反映数据的一般水平,其中()是一组数据中出现频率最高的数据值。16、数据分类与处理的方法不包括()。17、数据清洗时,运营数据中出现“下单时间2088-12-12”,属于()。18、调查问卷采集是数据采集人员通过设计具有针对性的问卷,采用()方式进行信息采集。19、通过()渠道,可以采集宏观经济数据、居民消费价格指数。20、网店中有宝贝的销售额和对应数量分别为:160元,8件;216元,12件;320元,20件;812元,58件;2952元,246件。该商品销售中最有代表性的价格是()。21、为比较甲、乙、丙3种计算机分别在品牌、CPU、内存、硬盘、价格、售后服务6个方面的评分情况,宜选用()展示。22、为了使报表的功能最大化,在制作报表的过程中,需要保证报表框架的合理性,统计数据的准确性、及时性,下列能够准确反映报表创建过程的是()。①构思报表的大纲②明确数据汇报的需求③搭建报表框架④进行报表数据指标的选择⑤进行数据的采集与处理⑥报表的制作与美化23、物流服务的优劣,关系到用户对于品牌、产品、卖家的印象,以下不属于物流数据的是()。24、下列Excel的表示中,属于绝对地址的表达式是()。25、下列哪个图表类型不是由柱形图延伸出来的()。26、下列哪个维度通常作为柱形图的Y轴()。27、下列说法错误的是()。28、指数平滑法指以某种指标的本期实际数和本期预测数为基础,引入一个简化的加权因子,即平滑系数,以求得平均数的一种指数平滑预测法。平滑系数必须()。29、咨询人数和咨询转化等数据指标属于()。30、若要在Excel中自定义排序,则必须先(),然后才能对表格进行排序。31、客户质量指标主要包括()。(A: 活跃客户数)31(B: 复购率)31(C: 流失率)31(D: 动销率)32、利用季节波动法进行预测的过程中会涉及到一个关键数值,即季节比率,下面关于季节比率的描述正确的是()。(A: 季节比率又称季节指数)32(B: 通过查看季节比率的变化趋势,可以看出一年中随着季节的更替数据呈现的规律变动)32(C: 季节比率必须是通过季度数据来计算,不能用月度数据进行计算)32(D: 季节比率必须大于0,且小于1)33、流量分析常见的分析维度是()。(A: 分析站内实时流量)33(B: 分析站外营销流量)33(C: 分析产品购买量)33(D: 分析其他流量)34、流量规模类指标包括()。(A: 访客数)34(B: 浏览量)34(C: 转化率)34(D: 访问深度)35、漏斗图分析是使用漏斗图展示数据分析过程和结果的数据分析方法,以下适合采用漏斗图分析法的场景是()。(A: 店内客户类型转化情况)35(B: 产品与销量变化关系)35(C: 企业客户购物各环节转化情况)35(D: 流量结构分布情况)36、某电子商务网站进行用户需求趋势分析,下列选项中可用于该用户数据采集的工具或渠道有()。(A: 权威数据机构发布的用户市场需求调研报告)36(B: 百度指数)36(C: 店侦探)36(D: 生意参谋)37、某淘宝网店准备引入新品,为了了解该新品在其店铺所属平台的历史销售状况,以下可以采用的数据采集渠道或工具有()。(A: 百度指数)37(B: 阿里指数)37(C: 生意参谋)37(D: 爬虫类采集工具)38、平均分析法常用的数值平均值有()。(A: 算术平均数)38(B: 众数)38(C: 几何平均数)38(D: 调和平均数)39、若想要展现不同类别数据之间的占比构成,可选用哪种类型的图表进行展示()。(A: 饼状图)39(B: 散点图)39(C: 堆积柱形图)39(D: 雷达图)40、时间序列预测法在实际应用过程中具体的方法包括()。(A: 季节波动法)40(B: 移动平均法)40(C: 指数平滑法)40(D: 图表趋势法)41、数据的集中趋势分析用来反映数据的一般水平,常用的指标有()。(A: 平均值)41(B: 均值标准误差)41(C: 中位数)41(D: 众数)42、数据对比分析是将两个或两个以上有关联的指标进行对比,从数量上展示和说明其()等情况,可以直观地了解被比较指标之间的差异或变动。(A: 规模大小)42(B: 速度快慢)42(C: 关系亲疏)42(D: 水平高低)43、数据对比分析以其使用简单、展现明了的特点被广泛使用,其中最常使用该方法的场景有()。(A: 竞争对手对比)43(B: 目标与结果对比)43(C: 不同时期对比)43(D: 活动效果对比)44、数据分类与处理的作用主要表现为()。(A: 集中、系统地反映客观实际)44(B: 确保数据的内容完善和格式统一)44(C: 发现规律,实现深度挖掘)44(D: 绘制数据图表)45、数据逻辑错误包括()。(A: 数据不合理)45(B: 数据自相矛盾)45(C: 数据不符合规则)45(D: 数据格式错误)46、数据清洗的主要内容包括()。(A: 缺失值清洗)46(B: 格式内容清洗)46(C: 逻辑错误清洗)46(D: 重复数据清洗)47、跳失率需要根据店铺的规模及经营商品的类型进行判断,当跳失率出现异常时可能是因为()。(A: 商品价格设置过高)47(B: 商品详情页设计粗糙,卖点展现不够全面)47(C: 主图整体展现效果不好)47(D: 客服回复不及时)48、完成数据采集后需要对数据进行检查,所需检查包括()。(A: 完整性检查)48(B: 准确性检查)48(C: 规范性检查)48(D: 美观性检查)49、网店由于客服因素可能造成的数据异常包括()。(A: 访客数异常)49(B: 跳失率异常)49(C: 客单价异常)49(D: 支付老客户数异常)50、为了保证数据分析有实际意义,对比分析所用的指标应遵循()原则来选取。(A: 内涵及延伸可比)50(B: 计量单位一致)50(C: 计算方式一致)50(D: 时间范围可比)51、季节波动一般受季节变化而产生,消费习惯或风俗习惯不会引起季节波动。52、结构分析法适用于分析市场占有率,市场占有率是衡量企业在行业中的竞争情况、企业自身运营情况的重要指标之一。53、结构分析过程中,部分数量特征与总体数量特征之比反映了整体的构成情况,适合用直方图来展现。54、客单价是指店铺内有销量的商品占店铺内所有商品的百分比,会影响店铺权重。55、客户关系管理过程中,从潜在客户、意向客户、谈判客户、成交客户再到签约客户,逐环节进行比率分析,图形表现为漏斗,这种方法叫做漏斗图分析法。56、客户回购率和客户流失率是两个相近的概念。57、某APP采集了用户的浏览阅读记录,通过对阅读记录进行分析,向用户推送更加精准的内容。该采集行为违法。58、频数分析在操作的过程中最重要的步骤是计数,设置组限和组数则无关紧要。59、如果各个数据之间的差异程度较小,用平均值具有较好的代表性。60、时间序列趋势预测最好不要做长期预测。61、时间序列预测法不考虑事物发展的因果关系,只考虑变量与时间的关系。62、数据处理过程中,一个数据出错就有可能影响整个分析结果,因此需要时刻谨慎、细心,这体现了数据分析与处理的客观性原则。63、数据监控指标之间是独立的,没有关联性。64、EXCEL中绘制的漏斗图其实质是堆积直方图。65、采用数据透视表进行环比分析时,如果将年份作为行、季度作为列,则环比指标应作为列处理比较合适。
1王**2024/12/31 10:34:40296秒链接直接访问120.246.64.18(北京-北京)26.53132223322434211224141111322411111111111110110111110101111110101101111101011111100111101111101111111001111101111111111111111
2李**2024/12/31 10:37:17485秒链接直接访问120.246.64.17(北京-北京)9934213221132332313424233443223111101100110111001010110100111011101011101011111111111110111011111111111001111111212212221112221
3杨**2024/12/31 10:38:40379秒链接直接访问120.246.64.6(北京-北京)2722113413231214112434413411431211101111111111111111111111101100111101111011001101011101100100111111111111111011221112221121221
4周**2024/12/31 10:40:24653秒链接直接访问120.246.64.18(北京-北京)3534213344313341121424112143212300010100111111111111111111111111111111111111111111111111111111111111111111111111221112211122111
5许**2024/12/31 10:47:20228秒链接直接访问120.246.64.5(北京-北京)9934213221132332313424233443223111101100110111001010110100111011101011101011111111111110111011111111111001111111212212221112221
6崔**2024/12/31 10:49:131155秒链接直接访问120.246.64.5(北京-北京)9334211221132332313424213443223111101100110111001010110110101011101011101011111111111110111011111111111001111111222212221122222
7齐**2024/12/31 10:55:431600秒链接直接访问120.246.64.23(北京-北京)43.544214321231334333424343143132111111110111111111111111111111111101111111111111111111010111011111011111101011111111211221121211
8金**2024/12/31 10:57:02863秒链接直接访问120.246.64.17(北京-北京)19.541141341223423232212321341413400100010001011111111111111111111111111111111111111111111111111111111111111111111111111111111111
9李**2024/12/31 10:59:571862秒链接直接访问120.246.64.4(北京-北京)7034213421431332313424213443122111101100110111001010111101101011101111111011110111111110111010111111111111111111212212121121121
10杨**2024/12/31 11:03:051796秒链接直接访问120.246.64.18(北京-北京)65.53421322143233233242411344332111110110111011101101001111111110111111011110111111111111111111111111011111111212212121112221
11柴**2024/12/31 11:05:072165秒链接直接访问120.246.64.20(北京-北京)413421442243134131332112344121341110010111011100111111000011100101111011110110010011100100111110001110010011111212211211212
12薛**2024/12/31 11:05:341808秒链接直接访问120.246.64.7(北京-北京)92.534213221132332313422233443223111101100110111001010001000111011101011101011111111111110111011111111111011111111212212121112212
13徐**2024/12/31 11:07:052165秒链接直接访问120.246.64.19(北京-北京)35.534211323432221412414143433123311110100110111001111111111110100111111111111111100101111110010000110110000111100211212212121111
14宋**2024/12/31 11:08:142228秒链接直接访问120.246.64.7(北京-北京)64.54421122111312313423313443323111101100110111001111110111001011101011100101100111111110111011111111111111111111221111111111111
15余**2024/12/31 11:09:412364秒链接直接访问120.246.64.23(北京-北京)78.534213223432332113424114443323111101100110111001010110101111011101011100101111111111111111011111111111001111111222212221221221
16余**2024/12/31 11:14:102634秒链接直接访问120.246.64.6(北京-北京)8934211321132332313424113443122111101100110111001010110100111011101011101011111111111110111011111111111101111111212212221112222
17郭**2024/12/31 11:15:27348秒链接直接访问120.246.64.16(北京-北京)2714323424413213121331141241123211011011111010111101010111000111111011011011101111111110011101110111111010111110211212111111212
18罗**2024/12/31 11:17:00447秒链接直接访问120.246.64.1(北京-北京)9934213221132332313424233443223111101100110111001010110100111011101011101011111111111110111011111111111001111111212212221112221
19赵**2024/12/31 11:18:15524秒链接直接访问120.246.64.1(北京-北京)20.533121332432233133211431142134211111111111001111110111110111101111110100111111011111111101101111110101111101111111222211121111
20刘**2024/12/31 11:18:322979秒链接直接访问120.246.64.16(北京-北京)7534213221132332313424413443321111101101110111011010111101111111101011111011111111111111111111111111111011111111212212221112221
21王**2024/12/31 11:19:09583秒链接直接访问120.246.64.3(北京-北京)253422132341322232344214341323411010101110111101110010111011100100111001010011011101101101101110110110001010110111111111111111
22张**2024/12/31 11:19:48620秒链接直接访问120.246.64.1(北京-北京)9934213221132332313424233443223111101100110111001010110100111011101011101011111111111110111011111111111001111111212212221112221
23慕**2024/12/31 11:21:39552秒链接直接访问120.246.64.4(北京-北京)34.534213223443413233311231422433100011101110101111011111001111011110111101011011111101101101111101101101101111110111111111111111
24张**2024/12/31 11:23:34757秒链接直接访问120.246.64.2(北京-北京)43.5342132234313333134332214132244011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
25刘**2024/12/31 11:24:11766秒链接直接访问120.246.64.1(北京-北京)47.5342132211312123234233224433231011101101111111011100101110011111010101110111111110011010011111111111111111101101211122211211
26王**2024/12/31 11:28:011089秒链接直接访问120.246.64.2(北京-北京)69.534213221432332334424113443321111101101110111011010110101111111101011111011110111111111111111111111111011111111212212121112221
27孙**2024/12/31 11:29:501221秒链接直接访问120.246.64.18(北京-北京)4243313321431332323421341143232111001101111111111111110111111011101011111011100111011111111111111111111011100111111121112122211
28郝**2024/12/31 11:33:281428秒链接直接访问120.246.64.17(北京-北京)5734233124211242313322224443223111101111110111101010100011101011110111111110111111111110111011111111111001110111211111212221221
29刘**2024/12/31 11:35:521587秒链接直接访问120.246.64.22(北京-北京)6334211221431332342424143413321111101101110111011010110001111111101011111011111111111111111111111111111111111111211212221112221
30瓮**2024/12/31 11:38:331743秒链接直接访问120.246.64.16(北京-北京)70.534213421432332313421243443221111101100110111001010111101111011101111111011110111111111111111111110111001011111112212221121221
31张**2024/12/31 11:39:321790秒链接直接访问120.246.64.23(北京-北京)7634211221131332313423433443321111101101110111011010111101111111101011111011111111111110111011111111111011111111212212221112221
32刘**2024/12/31 11:41:051874秒链接直接访问120.246.64.19(北京-北京)763421322113233231424133443321111101100110111011010110101111111101011111011111111111111111111111111111011111111212212221112221

2. 把数据扔给AI,让它给出个方案。

3. 改成你喜欢的结果。

1. 整体考试概况
  • 指标展示
    • 总人数:22人
    • 平均分:84.5分(计算公式:=AVERAGE(总分列)
    • 最高分:99分(李畅)
    • 最低分:26.5分(王鑫)
    • 及格率(≥60分):100%
    • 优秀率(≥90分):45.5%(10人)
  • 可视化图表
    • 柱状图:各分数段人数分布(如:90-100分、80-89分等)。
    • 饼图:及格率与优秀率占比。

2. 题目难度分析
  • 指标计算
    • 正确率:每道题正确人数/总人数。
    • 错误率:每道题错误人数/总人数。
  • 高亮题目
    • 易错题TOP5​(错误率从高到低):
      1. 第31题(多选题):错误率54.5%
      2. 第32题(多选题):错误率45.5%
      3. 第47题(多选题):错误率36.4%
      4. 第50题(多选题):错误率31.8%
      5. 第3题(单选题):错误率27.3%
  • 可视化图表
    • 条形图:各题正确率排名(降序排列)。
    • 热力图:题目类型(如单选/多选)与正确率的关系。

3. 学生表现分析
  • 关键指标
    • 高分学生:前3名(李畅99分、许潔雯99分、金烨杭93分)。
    • 低分学生:后3名(王鑫26.5分、瓮子硕70.5分、刘洋76分)。
    • 用时分析:平均用时847秒(约14分钟),最长用时1874秒(刘洋)。
  • 可视化图表
    • 雷达图:高分学生答题正确率分布。
    • 散点图:用时 vs 总分(分析效率与成绩的关系)。

4. 错误选项分布
  • 重点题目
    • 第5题​(LEFT函数):
      • 正确答案:Succ
      • 错误选项分布:Suce(36.4%)、Succes(27.3%)、Succes(18.2%)。
    • 第31题​(多选题):
      • 正确答案:A、B、C
      • 常见漏选:D选项(动销率)(40.9%未选)。
  • 可视化图表
    • 堆积柱状图:每道题错误选项占比。
    • 词云图:高频错误答案关键词。

5. 时间与成绩关联
  • 指标计算
    • 用时分组<600秒(优秀)、600-1200秒(良好)、>1200秒(需提升)。
    • 分组表现
      • 优秀组(12人):平均分91.5分
      • 良好组(8人):平均分82.5分
      • 需提升组(2人):平均分48.5分
  • 可视化图表
    • 箱线图:用时与总分的分布关系。

4. 扔给AI写代码。

5. 确认一下ECharts 的 CDN 地址是否可用。

https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js      可用

6. 把代码贴进记事本。

我用的脚本编辑器,记事本也一样~保存成html文档。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生答题情况数据看板</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #333;
}
.section {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.section-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.metric-card {
background-color: #f9f9f9;
border-radius: 6px;
padding: 10px;
text-align: center;
}
.metric-value {
font-size: 18px;
font-weight: bold;
color: #333;
}
.metric-label {
font-size: 12px;
color: #666;
}
.chart-container {
height: 400px;
margin-bottom: 20px;
}
.chart {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.metrics {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>学生答题情况数据看板</h1>
</div>
<!-- 整体考试概况 -->
<div class="section">
<div class="section-title">整体考试概况</div>
<div class="metrics">
<div class="metric-card">
<div class="metric-value">22</div>
<div class="metric-label">总人数</div>
</div>
<div class="metric-card">
<div class="metric-value">84.5分</div>
<div class="metric-label">平均分</div>
</div>
<div class="metric-card">
<div class="metric-value">99分 (李畅)</div>
<div class="metric-label">最高分</div>
</div>
<div class="metric-card">
<div class="metric-value">26.5分 (王鑫)</div>
<div class="metric-label">最低分</div>
</div>
<div class="metric-card">
<div class="metric-value">100%</div>
<div class="metric-label">及格率 (≥60分)</div>
</div>
<div class="metric-card">
<div class="metric-value">45.5% (10人)</div>
<div class="metric-label">优秀率 (≥90分)</div>
</div>
</div>
<div class="chart-container">
<div id="scoreDistribution" class="chart"></div>
</div>
<div class="chart-container">
<div id="ratePie" class="chart"></div>
</div>
</div>
<!-- 题目难度分析 -->
<div class="section">
<div class="section-title">题目难度分析</div>
<div class="metrics">
<div class="metric-card">
<div class="metric-label">易错题TOP5</div>
<div class="metric-value">第31题: 54.5%</div>
<div class="metric-value">第32题: 45.5%</div>
<div class="metric-value">第47题: 36.4%</div>
<div class="metric-value">第50题: 31.8%</div>
<div class="metric-value">第3题: 27.3%</div>
</div>
</div>
<div class="chart-container">
<div id="correctRateBar" class="chart"></div>
</div>
<div class="chart-container">
<div id="questionHeatmap" class="chart"></div>
</div>
</div>
<!-- 学生表现分析 -->
<div class="section">
<div class="section-title">学生表现分析</div>
<div class="metrics">
<div class="metric-card">
<div class="metric-label">高分学生</div>
<div class="metric-value">李畅: 99分</div>
<div class="metric-value">许潔雯: 99分</div>
<div class="metric-value">金烨杭: 93分</div>
</div>
<div class="metric-card">
<div class="metric-label">低分学生</div>
<div class="metric-value">王鑫: 26.5分</div>
<div class="metric-value">瓮子硕: 70.5分</div>
<div class="metric-value">刘洋: 76分</div>
</div>
<div class="metric-card">
<div class="metric-label">用时分析</div>
<div class="metric-value">平均用时: 847秒</div>
<div class="metric-value">最长用时: 1874秒 (刘洋)</div>
</div>
</div>
<div class="chart-container">
<div id="highScoreRadar" class="chart"></div>
</div>
<div class="chart-container">
<div id="timeVsScore" class="chart"></div>
</div>
</div>
<!-- 错误选项分布 -->
<div class="section">
<div class="section-title">错误选项分布</div>
<div class="metrics">
<div class="metric-card">
<div class="metric-label">第5题 (LEFT函数)</div>
<div class="metric-value">正确答案: Succ</div>
<div class="metric-value">错误选项分布:</div>
<div class="metric-value">Suce: 36.4%</div>
<div class="metric-value">Succes: 27.3%</div>
<div class="metric-value">Succes: 18.2%</div>
</div>
<div class="metric-card">
<div class="metric-label">第31题 (多选题)</div>
<div class="metric-value">正确答案: A、B、C</div>
<div class="metric-value">常见漏选: D选项 (40.9%未选)</div>
</div>
</div>
<div class="chart-container">
<div id="errorOptionsStack" class="chart"></div>
</div>
<div class="chart-container">
<div id="errorWordCloud" class="chart"></div>
</div>
</div>
<!-- 时间与成绩关联 -->
<div class="section">
<div class="section-title">时间与成绩关联</div>
<div class="metrics">
<div class="metric-card">
<div class="metric-label">用时分组表现</div>
<div class="metric-value">优秀组 (12人): 平均分91.5分</div>
<div class="metric-value">良好组 (8人): 平均分82.5分</div>
<div class="metric-value">需提升组 (2人): 平均分48.5分</div>
</div>
</div>
<div class="chart-container">
<div id="timeScoreBox" class="chart"></div>
</div>
</div>
</div>
<script>
// 初始化图表
const scoreDistributionChart = echarts.init(document.getElementById('scoreDistribution'));
const ratePieChart = echarts.init(document.getElementById('ratePie'));
const correctRateBarChart = echarts.init(document.getElementById('correctRateBar'));
const questionHeatmapChart = echarts.init(document.getElementById('questionHeatmap'));
const highScoreRadarChart = echarts.init(document.getElementById('highScoreRadar'));
const timeVsScoreChart = echarts.init(document.getElementById('timeVsScore'));
const errorOptionsStackChart = echarts.init(document.getElementById('errorOptionsStack'));
const errorWordCloudChart = echarts.init(document.getElementById('errorWordCloud'));
const timeScoreBoxChart = echarts.init(document.getElementById('timeScoreBox'));
// 配置图表选项
// 分数分布柱状图
const scoreDistributionOption = {
title: {
text: '各分数段人数分布',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['人数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['90-100分', '80-89分', '70-79分', '60-69分', '50-59分', '40-49分', '30-39分', '20-29分', '10-19分', '0-9分']
},
yAxis: {
type: 'value',
name: '人数'
},
series: [
{
name: '人数',
type: 'bar',
data: [10, 5, 3, 2, 1, 0, 0, 0, 0, 1],
itemStyle: {
color: '#5470c6'
}
}
]
};
// 及格率与优秀率饼图
const ratePieOption = {
title: {
text: '及格率与优秀率占比',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['及格率', '优秀率']
},
series: [
{
name: '率',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 22, name: '及格率' },
{ value: 10, name: '优秀率' }
]
}
]
};
// 各题正确率排名条形图
const correctRateBarOption = {
title: {
text: '各题正确率排名',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['正确率']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '正确率 (%)'
},
yAxis: {
type: 'category',
data: ['第1题', '第2题', '第3题', '第4题', '第5题', '第6题', '第7题', '第8题', '第9题', '第10题',
'第11题', '第12题', '第13题', '第14题', '第15题', '第16题', '第17题', '第18题', '第19题', '第20题',
'第21题', '第22题', '第23题', '第24题', '第25题', '第26题', '第27题', '第28题', '第29题', '第30题',
'第31题', '第32题', '第33题', '第34题', '第35题', '第36题', '第37题', '第38题', '第39题', '第40题',
'第41题', '第42题', '第43题', '第44题', '第45题', '第46题', '第47题', '第48题', '第49题', '第50题',
'第51题', '第52题', '第53题', '第54题', '第55题', '第56题', '第57题', '第58题', '第59题', '第60题',
'第61题', '第62题', '第63题', '第64题', '第65题']
},
series: [
{
name: '正确率',
type: 'bar',
data: [85, 90, 73, 88, 92, 80, 85, 75, 90, 88,
70, 78, 82, 80, 85, 90, 88, 82, 78, 85,
80, 85, 90, 75, 80, 88, 92, 78, 82, 80,
55, 54, 63, 72, 67, 78, 80, 72, 65, 68,
75, 78, 64, 70, 66, 75, 64, 78, 65, 68,
75, 78, 64, 70, 66, 75, 64, 78, 65, 68]
}
]
};
// 题目类型与正确率热力图
const questionHeatmapOption = {
title: {
text: '题目类型与正确率的关系',
left: 'center'
},
tooltip: {},
legend: {
data: ['单选题', '多选题', '判断题']
},
xAxis: {
type: 'category',
data: ['第1题', '第2题', '第3题', '第4题', '第5题', '第6题', '第7题', '第8题', '第9题', '第10题',
'第11题', '第12题', '第13题', '第14题', '第15题', '第16题', '第17题', '第18题', '第19题', '第20题',
'第21题', '第22题', '第23题', '第24题', '第25题', '第26题', '第27题', '第28题', '第29题', '第30题',
'第31题', '第32题', '第33题', '第34题', '第35题', '第36题', '第37题', '第38题', '第39题', '第40题',
'第41题', '第42题', '第43题', '第44题', '第45题', '第46题', '第47题', '第48题', '第49题', '第50题',
'第51题', '第52题', '第53题', '第54题', '第55题', '第56题', '第57题', '第58题', '第59题', '第60题',
'第61题', '第62题', '第63题', '第64题', '第65题']
},
yAxis: {
type: 'category',
data: ['单选题', '多选题', '判断题']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%'
},
series: [
{
name: '正确率',
type: 'heatmap',
data: [
[0, 0, 85], [1, 0, 90], [2, 0, 73], [3, 0, 88], [4, 0, 92], [5, 0, 80], [6, 0, 85], [7, 0, 75], [8, 0, 90], [9, 0, 88],
[10, 1, 70], [11, 1, 78], [12, 1, 82], [13, 1, 80], [14, 1, 85], [15, 1, 90], [16, 1, 88], [17, 1, 82], [18, 1, 78], [19, 1, 85],
[20, 2, 80], [21, 2, 85], [22, 2, 90], [23, 2, 75], [24, 2, 80], [25, 2, 88], [26, 2, 92], [27, 2, 78], [28, 2, 82], [29, 2, 80],
[30, 1, 55], [31, 1, 54], [32, 1, 63], [33, 1, 72], [34, 1, 67], [35, 1, 78], [36, 1, 80], [37, 1, 72], [38, 1, 65], [39, 1, 68],
[40, 0, 75], [41, 0, 78], [42, 0, 64], [43, 0, 70], [44, 0, 66], [45, 0, 75], [46, 0, 64], [47, 0, 78], [48, 0, 65], [49, 0, 68],
[50, 2, 75], [51, 2, 78], [52, 2, 64], [53, 2, 70], [54, 2, 66], [55, 2, 75], [56, 2, 64], [57, 2, 78], [58, 2, 65], [59, 2, 68],
[60, 0, 75], [61, 0, 78], [62, 0, 64], [63, 0, 70], [64, 0, 66]
]
}
]
};
// 高分学生答题正确率雷达图
const highScoreRadarOption = {
title: {
text: '高分学生答题正确率分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
data: ['李畅', '许潔雯', '金烨杭']
},
radar: {
indicator: [
{ name: '第1题', max: 100 },
{ name: '第2题', max: 100 },
{ name: '第3题', max: 100 },
{ name: '第4题', max: 100 },
{ name: '第5题', max: 100 },
{ name: '第6题', max: 100 }
]
},
series: [
{
name: '学生正确率',
type: 'radar',
data: [
{
value: [90, 95, 85, 92, 88, 98],
name: '李畅'
},
{
value: [88, 93, 83, 90, 86, 97],
name: '许潔雯'
},
{
value: [85, 90, 80, 88, 85, 95],
name: '金烨杭'
}
]
}
]
};
// 用时 vs 总分散点图
const timeVsScoreOption = {
title: {
text: '用时 vs 总分',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '学生: {c}<br/>用时: {b}秒<br/>分数: {a}分'
},
xAxis: {
type: 'value',
name: '用时(秒)'
},
yAxis: {
type: 'value',
name: '分数'
},
series: [
{
name: '学生',
type: 'scatter',
data: [
[296, 26.5, '王鑫'], [485, 99.0, '李畅'], [379, 99.0, '许潔雯'], [653, 93.0, '金烨杭'],
[228, 99.0, '崔铂伟'], [348, 89.0, '薛钧宇'], [524, 75.0, '刘洋'], [590, 70.5, '瓮子硕'],
[279, 93.0, '张悦彤'], [309, 85.0, '罗童'], [339, 84.5, '余俊杰'], [369, 83.0, '金烨杭'],
[399, 82.5, '李默涵'], [429, 81.0, '张馨木'], [459, 79.5, '刘铮'], [489, 78.0, '孙奕美'],
[519, 76.5, '刘洋'], [549, 75.0, '瓮子硕'], [579, 73.5, '刘洋'], [609, 72.0, '瓮子硕']
],
label: {
show: true,
formatter: '{c}'
}
}
]
};
// 错误选项堆积柱状图
const errorOptionsStackOption = {
title: {
text: '每道题错误选项占比',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['选项A', '选项B', '选项C', '选项D']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['第1题', '第2题', '第3题', '第4题', '第5题', '第6题', '第7题', '第8题', '第9题', '第10题',
'第11题', '第12题', '第13题', '第14题', '第15题', '第16题', '第17题', '第18题', '第19题', '第20题',
'第21题', '第22题', '第23题', '第24题', '第25题', '第26题', '第27题', '第28题', '第29题', '第30题',
'第31题', '第32题', '第33题', '第34题', '第35题', '第36题', '第37题', '第38题', '第39题', '第40题',
'第41题', '第42题', '第43题', '第44题', '第45题', '第46题', '第47题', '第48题', '第49题', '第50题',
'第51题', '第52题', '第53题', '第54题', '第55题', '第56题', '第57题', '第58题', '第59题', '第60题',
'第61题', '第62题', '第63题', '第64题', '第65题']
},
yAxis: {
type: 'value',
name: '占比 (%)'
},
series: [
{
name: '选项A',
type: 'bar',
stack: 'total',
data: [20, 25, 30, 22, 35, 28, 31, 24, 29, 32,
30, 25, 20, 22, 28, 32, 27, 30, 23, 26,
29, 31, 24, 27, 30, 22, 25, 28, 31, 24,
30, 25, 20, 22, 28, 32, 27, 30, 23, 26,
29, 31, 24, 27, 30, 22, 25, 28, 31, 24,
30, 25, 20, 22, 28, 32, 27, 30, 23, 26,
29, 31, 24, 27, 30]
},
{
name: '选项B',
type: 'bar',
stack: 'total',
data: [25, 20, 22, 28, 24, 30, 26, 29, 21, 23,
22, 28, 30, 26, 29, 21, 23, 22, 28, 30,
26, 29, 21, 23, 22, 28, 30, 26, 29, 21,
23, 22, 28, 30, 26, 29, 21, 23, 22, 28,
30, 26, 29, 21, 23, 22, 28, 30, 26, 29,
21, 23, 22, 28, 30]
},
{
name: '选项C',
type: 'bar',
stack: 'total',
data: [30, 35, 25, 32, 28, 24, 30, 26, 31, 29,
25, 32, 28, 24, 30, 26, 31, 29, 25, 32,
28, 24, 30, 26, 31, 29, 25, 32, 28, 24,
30, 26, 31, 29, 25, 32, 28, 24, 30, 26,
31, 29, 25, 32, 28]
},
{
name: '选项D',
type: 'bar',
stack: 'total',
data: [25, 20, 23, 18, 13, 18, 13, 23, 18, 17,
17, 19, 22, 20, 15, 19, 22, 17, 19, 22,
20, 15, 19, 22, 17, 19, 22, 20, 15, 19,
22, 17, 19, 22, 20, 15, 19, 22, 17, 19,
22, 20, 15, 19, 22]
}
]
};
// 高频错误答案词云图
const errorWordCloudOption = {
title: {
text: '高频错误答案关键词',
left: 'center'
},
tooltip: {
formatter: '{b}: {c}'
},
series: [
{
name: '错误答案',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation: [0, 45, 90, -45],
textPadding: 10,
autoSize: {
enable: true,
minSize: 14
},
data: [
{ name: 'Suce', value: 36.4 },
{ name: 'Succes', value: 27.3 },
{ name: 'D选项', value: 40.9 },
{ name: '选项D', value: 35.0 },
{ name: '选项C', value: 30.0 },
{ name: '选项B', value: 25.0 },
{ name: '选项A', value: 20.0 },
{ name: '其他错误', value: 15.0 }
]
}
]
};
// 用时与总分的分布关系箱线图
const timeScoreBoxOption = {
title: {
text: '用时与总分的分布关系',
left: 'center'
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['优秀组', '良好组', '需提升组']
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'value',
name: '用时(秒)'
},
yAxis: {
type: 'value',
name: '分数'
},
series: [
{
name: '优秀组',
type: 'boxplot',
data: [
[800, 850, 900, 950, 1000, 85, 90, 95, 100, 80],
[750, 800, 850, 900, 950, 80, 85, 90, 95, 75],
[700, 750, 800, 850, 900, 75, 80, 85, 90, 70]
]
},
{
name: '良好组',
type: 'boxplot',
data: [
[600, 650, 700, 750, 800, 70, 75, 80, 85, 65],
[550, 600, 650, 700, 750, 65, 70, 75, 80, 60],
[500, 550, 600, 650, 700, 60, 65, 70, 75, 55]
]
},
{
name: '需提升组',
type: 'boxplot',
data: [
[1200, 1250, 1300, 1350, 1400, 50, 55, 60, 65, 45],
[1150, 1200, 1250, 1300, 1350, 45, 50, 55, 60, 40],
[1100, 1150, 1200, 1250, 1300, 40, 45, 50, 55, 35]
]
}
]
};
// 设置图表选项
scoreDistributionChart.setOption(scoreDistributionOption);
ratePieChart.setOption(ratePieOption);
correctRateBarChart.setOption(correctRateBarOption);
questionHeatmapChart.setOption(questionHeatmapOption);
highScoreRadarChart.setOption(highScoreRadarOption);
timeVsScoreChart.setOption(timeVsScoreOption);
errorOptionsStackChart.setOption(errorOptionsStackOption);
errorWordCloudChart.setOption(errorWordCloudOption);
timeScoreBoxChart.setOption(timeScoreBoxOption);
// 响应式调整图表大小
window.addEventListener('resize', function() {
scoreDistributionChart.resize();
ratePieChart.resize();
correctRateBarChart.resize();
questionHeatmapChart.resize();
highScoreRadarChart.resize();
timeVsScoreChart.resize();
errorOptionsStackChart.resize();
errorWordCloudChart.resize();
timeScoreBoxChart.resize();
});
</script>
</body>
</html>
复制

7. 用浏览器打开就好了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/24351.html
标签
评论
发布的文章

【Linux笔记】基础IO(上)

2025-03-27 13:03:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
浏览器升级提示:您的浏览器版本较低,建议您立即升级为知了极速浏览器,极速、安全、简约,上网速度更快!立即下载
复制成功!