UserInformationManager/app01/templates/chart_list.html

{% extends 'layout.html' %}
{% load static %}
{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">折线图</div>
            <div class="panel-body">
                <div id="m2" style="width: 100%   ;height:400px;"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">柱状图</div>
                    <div class="panel-body">
                        <div id="m1" style="width: 100%   ;height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">饼图</div>
                    <div class="panel-body">
                         <div id="m3" style="width: 100%   ;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'js/echarts.js' %}"></script>
    <script type="text/javascript">


      $(function () {
          initBar();
          initLine();
          initPie();

      })

      /**
       * 初始化图
       */
      function initBar() {

          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('m1'));

          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: '各部门员工人数',
                  textAlign: "auto",
                  left: "center"
              },
              tooltip: {},
              legend: {
                  data: [],
                  bottom: 0,
              },
              xAxis: {
                  data: []
              },
              yAxis: {},
              series: []
          };

          $.ajax({
              url:"/chart/bar/",
              type:"get",
              dataType:"JSON",
              success:function (res){
                  // 使用刚指定的配置项和数据显示图表。
                  if (res.status){
                      option.legend.data=res.data.legend;
                      option.yAxis.data=res.data.yAxis;
                      option.series=res.data.series;
                      myChart.setOption(option);
                  }


              }
          })


      }
      function  initLine(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('m2'));

          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: '各部门工资分布情况'
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: []
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: []
              },
              yAxis: {
                  type: 'value'
              },
              series: []
          };
          $.ajax({
              url:"/chart/line/",
              type:"get",
              dataType:"JSON",
              success:function (res){
                  // 使用刚指定的配置项和数据显示图表。
                  if (res.status){
                      option.legend.data=res.data.legend;
                      option.yAxis.data=res.data.yAxis;
                      option.series=res.data.series;
                      myChart.setOption(option);
                  }


              }
          })


      }

      function initPie() {

          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('m3'));

          // 指定图表的配置项和数据
          option = {
              title: {
                  text: '公司男女人数比例',
                  subtext: 'Fake Data',
                  left: 'center'
              },
              tooltip: {
                  trigger: 'item'
              },
              legend: {
                  orient: 'vertical',
                  left: 'left'
              },
              series: [
                  {
                      name: 'Access From',
                      type: 'pie',
                      radius: '50%',
                      data: [],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };
          $.ajax({
              url:"/chart/Pie/",
              type:"get",
              dataType:"JSON",
              success:function (res){
                  // 使用刚指定的配置项和数据显示图表。
                  if (res.status){
                      option.series[0].data=res.data.data1;
                      myChart.setOption(option);
                  }


              }
          })



      }

    </script>
{% endblock %}