本系列将详细介绍如何使用%ignore_a_1%框架搭建一个网站，专注于创建一个独立的项目应用，主要功能包括学习成绩查询和数据统计分析。该项目将涉及前端技术如datatables、echarts和jquery。
Part 1：目标
我们的目标是实现对查询的成绩进行排榜，展示一个柱状图和一个折线图。每个图表下方将有一个区域，允许用户对X轴进行缩放。
这是X轴缩放的演示动图。
Part 2：代码
界面设计为一行两张卡片，每张卡片内包含两个子卡片。
以下是用于显示排行榜的JavaScript代码：
Ideogram
Ideogram是一个全新的文本转图像AI绘画生成平台，擅长于生成带有文本的图像，如LOGO上的字母、数字等。
512 查看详情
排行榜-柱状图排行榜-折线图
js部分：更新图表1
以下是用于更新柱状图的JavaScript代码：
// 更新图表1var str_title = JSON.stringify(data.title_name);var array_title = JSON.parse(str_title);// x轴信息var str_xaxis = JSON.stringify(data.xaxis);var array_xaxis = JSON.parse(str_xaxis);var chart_1 = echarts.init(document.getElementById("chart-1"));chart_1.clear(); // 清空原图表if (Array.isArray(array_xaxis) && array_xaxis.length === 0) { // 没有数据，清空即可 alert("无数据");} else { var str_y = JSON.stringify(data.y); var array_y = JSON.parse(str_y); var option = { xAxis: { type: 'category', data: array_xaxis }, dataZoom: [{ startValue: '' }, { type: 'inside' }], yAxis: { type: 'value' }, series: [{ data: array_y, type: 'bar', label: { show: true, position: 'inside' }, showBackground: true, backgroundStyle: { color: '#e7e7e7' } }] }; chart_1.setOption(option);};
js部分：更新图表2
以下是用于更新折线图的JavaScript代码：
// 更新图表2str_title = JSON.stringify(data.title_name);array_title = JSON.parse(str_title);// x轴信息str_xaxis = JSON.stringify(data.xaxis);array_xaxis = JSON.parse(str_xaxis);chart_2 = echarts.init(document.getElementById("chart-2"));chart_2.clear(); // 清空原图表if (Array.isArray(array_xaxis) && array_xaxis.length === 0) { // 没有数据，清空即可 alert("无数据");} else { str_y = JSON.stringify(data.y); array_y = JSON.parse(str_y); option = { xAxis: { type: 'category', data: array_xaxis }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, dataZoom: [{ startValue: '' }, { type: 'inside' }], yAxis: { type: 'value' }, series: [{ data: array_y, type: 'line', }] }; chart_2.setOption(option);}
Part 3：部分代码解读
界面设计为一行多张卡片，通过
col-md-6
来分割。
第1部分第2部分
以下是用于显示X轴缩放功能的JavaScript代码：
dataZoom: [ { startValue: '' }, { type: 'inside' }],
长按图片识别二维码，关注本公众号Python 优雅 帅气
以上就是网站搭建-django-学习成绩管理-13-ECharts的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/777312.html
微信扫一扫 
支付宝扫一扫 
