网站搭建-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个卡片内，包含两个子卡片

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

代码截图

2. 显示X轴缩放

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

---

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

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