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

系统：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个卡片内，包含两个子卡片

代码语言：javascript复制

<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

代码语言：javascript复制

        // 第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

代码语言：javascript复制

// 第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来分割

代码语言：javascript复制

<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轴**缩放

代码语言：javascript复制

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

---

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

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

python windows django 编程算法

0 人点赞