首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网站搭建-django-学习成绩管理-13-ECharts

网站搭建-django-学习成绩管理-13-ECharts

作者头像
zishendianxia
发布2021-06-21 19:40:04
7970
发布2021-06-21 19:40:04
举报
文章被收录于专栏:Python工程师Python工程师

系统:Windows 10 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:JetBrains PyCharm Community Edition 2018.2.2 x64 Django:2.1.4 Python:3.6.0

  • 本系列介绍如何搭建一个网站,后端使用django框架
  • 今天开始介绍一个单独的项目app
  • 主要功能包括:学习成绩查询,数据统计分析
  • 涉及前端模块:Datatables、ECharts、JQuery

Part 1:目标

  1. 对查询的成绩进行排榜,一个柱状图,一个折线图
  2. 每个图下面有一个区域,可以对X轴进行缩放

柱状图

缩放动图

Part 2:代码

1行2卡片:1个卡片内,包含两个子卡片

<div class="card m-auto bg-light" style="width: 96%;">
    <div class="card-body">
      <div class="row">
        <!-- 卡片1 -->
        <div class="col-md-6" >
          <div class='card m-auto' style="width: 100%;">
            <div class='card-body'>
              <div class='card-title bg-warning text-white text-center'>排行榜-柱状图</div>
              <div class='card-text'>
                <div id="chart-1" style="height: 500px;width: 100%;"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 卡片2 -->
        <div class="col-md-6" >
          <div class='card m-auto' style="width: 100%;">
            <div class='card-body'>
              <div class='card-title bg-warning text-white text-center'>排行榜-折线图</div>
              <div class='card-text'>
                <div id="chart-2" style="height: 500px;width: 100%;"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>

js部分:更新图表1

        // 第2部分:更新图表1
var 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


// 第3部分:更新图表2
str_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:部分代码解读

1行n卡片构成,通过col-md-6来分割

<div class="card m-auto bg-light" style="width: 96%;">
  <div class="card-body">
    <div class="row">
      <!-- 卡片1 -->
      <div class="col-md-6" >
        <div class='card m-auto' style="width: 100%;">
          <div class='card-body'>
            <div class='card-title bg-warning text-white text-center'>第1部分</div>
            <div class='card-text'>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 卡片2 -->
      <div class="col-md-6" >
        <div class='card m-auto' style="width: 100%;">
          <div class='card-body'>
            <div class='card-title bg-warning text-white text-center'>第2部分</div>
            <div class='card-text'>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

<br/>

显示**X轴**缩放

dataZoom: [
              {
                startValue: ''
              }, 
              {
                type: 'inside'
              }
            ],

以上为本次的学习内容,下回见

长按图片识别二维码,关注本公众号 Python 优雅 帅气

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-05-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python工程师 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Part 3:部分代码解读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档