【暑期实训09】day21

实现echarts饼图读取后台数据并显示

<template>
  <el-row class="wrap">
    <el-col :span="24" class="wrap-breadcrumb">
      <el-breadcrumb seporate="/">
        <el-breadcrumb-item :to="{ path: '/'}"><b>首页</b></el-breadcrumb-item>
      </el-breadcrumb>
      <el-col :span="24" class="wrap-main">
        <section class="chart-container">
          <el-row>
            <el-col :span="8">
              <el-card :body-style="{ padding: '0px'}">
                <img src="../../assets/images/card1.jpg">
                <div style="padding: 12px;">
                  <span>山大知新楼</span>
                  <div class="bottom clearfix">
                    <time class="time">2021-14-19</time>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card :body-style="{ padding: '0px'}">
                <img src="../../assets/images/card2.jpg">
                <div style="padding: 12px;">
                  <span>中心体育场</span>
                  <div class="bottom clearfix">
                    <time class="time">2021-14-19</time>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card :body-style="{ padding: '0px'}">
                <img src="../../assets/images/card3.jpg">
                <div style="padding: 12px;">
                  <span>山大软件园</span>
                  <div class="bottom clearfix">
                    <time class="time">2021-14-19</time>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <div id="chartGender" style="width: 100%; height: 400px;"></div>
            </el-col>
            <el-col :span="12">
              <div id="chartBar" style="width: 100%; height: 400px;"></div>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="12"></el-col>
            <el-col :span="24"></el-col>
          </el-row>
        </section>
      </el-col>
    </el-col>
  </el-row>
</template>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .chart-container {
    width: 100%;
  }
  .chart-container .el-col {
    padding: 30px 20px;
  }
</style>
<script>
  import echarts from 'echarts'
  export default {
    name: 'dashboard',
    data(){
      return {
        nan:1,
        nv:1,
        chartGender: null,
        chartBar: null
      }
    },
    mounted (){
      this.drawShape();
    },

    methods: {
      drawShape(){
        let _this = this;
        this.chartGender = echarts.init(document.getElementById('chartGender'));
        this.chartBar = echarts.init(document.getElementById('chartBar'));
       // console.log(_this.data.nan);
        var option;
        option={
          title: {
            text: '学生性别比例',
          //  subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
               // {value: 1, name: '男'},
                {value: 1, name: '女'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        axios.get('http://localhost:8181/student/countGender?stu_gender=男').then(function(resp){
          _this.nan = resp.data;
          option.series[0].data[0]={value:resp.data,name:'男'};
          axios.get('http://localhost:8181/student/countGender?stu_gender=女').then(function(resp){
            _this.nv = resp.data;
            option.series[0].data[1]={value:resp.data,name:'女'};
            _this.chartGender.setOption(option);
          });

        });


        this.chartBar.setOption({
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'直接访问',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
            }
          ]
        });
      }
    }
  }
</script>

效果：