Vue+Echarts+数据库动态显示

Vue+Echarts+数据库动态显示

请问怎么按照如图那样筛选出先要显示的数据的图表呢？

目前的数据是写死的，请问怎么动态从后台数据库筛选出想要的数据形成图表呢？？？涉及到的代码如下，求教各位大神

1.后台EchartsController.java

package com.qingge.springboot.controller;

import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.Quarter;
import com.qingge.springboot.common.Result;
import com.qingge.springboot.entity.User;
import com.qingge.springboot.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalDateTime;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/echarts")
public class EchartsController {

    @Autowired
    private IUserService userService;

    @GetMapping("/example")
    public Result get() {

        Map<String, Object> map = new HashMap<>();
        map.put("x", CollUtil.newArrayList("合计", "城区", "镇区", "乡村"));
        map.put("y", CollUtil.newArrayList(150, 230, 224, 218));
        return Result.success(map);
    }

    @GetMapping("/members")
    public Result members() {
        List<User> list = userService.list();
        int q1 = 0; // 第一季度
        int q2 = 0; // 第二季度
        int q3 = 0; // 第三季度
        int q4 = 0; // 第四季度
        for (User user : list) {
            Date createTime = user.getCreateTime();
            Quarter quarter = DateUtil.quarterEnum(createTime);
            switch (quarter) {
                case Q1: q1 += 1; break;
                case Q2: q2 += 1; break;
                case Q3: q3 += 1; break;
                case Q4: q4 += 1; break;
                default: break;
            }
        }
        return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));
    }

}

2.前端echarts.vue

<template>
  <div>
    <div style="margin: 10px 0">
      年份：
      <el-select v-model="ageType" clearable placeholder="请选择">
        <el-option
            v-for="item in age"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      城市：
      <el-select v-model="cityType" clearable placeholder="请选择">
        <el-option
            v-for="item in city"
            :key="item.value2"
            :label="item.label2"
            :value="item.value2">
        </el-option>
      </el-select>
      办学类型：
      <el-select v-model="scType" clearable placeholder="请选择">
        <el-option
            v-for="item in options3"
            :key="item.value3"
            :label="item.label3"
            :value="item.value3">
        </el-option>
      </el-select>

      <el-button class="ml-5" type="primary" @click="load">筛选</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin: 20px 0">
       图表  
    </div>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 500px; height: 400px"></div>
      </el-col>

      <el-col :span="12">
        <div id="pie" style="width: 500px; height: 400px"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Home",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      username: "",
      email: "",
      address: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      age: [{
        value: '2020',
        label: '2020'
      }, {
        value: '2021',
        label: '2021'
      }],

      city: [{
        value2: '610900000000',
        label2: '安康市'
      }, {
        value2: '610300000000',
        label2: '宝鸡市'
      }, {
        value2: '610700000000',
        label2: '汉中市'
      },{
        value2: '611000000000',
        label2: '商洛市'
      },{
        value2: '610200000000',
        label2: '铜川市'
      },{
        value2: '610500000000',
        label2: '渭南市'
      },{
        value2: '610100000000',
        label2: '西安市'
      },{
        value2: '610400000000',
        label2: '咸阳市'
      },{
        value2: '610600000000',
        label2: '延安市'
      },{
        value2: '612000000000',
        label2: '杨凌示范区代管'
      },{
        value2: '610800000000',
        label2: '榆林市'
      }],

      options3: [{
        value3: '小学',
        label3: '小学'
      }, {
        value3: '初中',
        label3: '初中'
      }, {
        value3: '高中',
        label3: '高中'
      }, {
        value3: '民办',
        label3: '民办'
      }],
      value: "",
      scType: "",
      cityType:"",
      ageType:"",

      barLineOption:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '数量统计',
          subtext: '趋势图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ["合计", "城区", "镇区", "乡村"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          },
          {
            data: [],
            type: 'bar'
          }
        ]
      },
    }
  },
  methods: {
    getBarLine() {
      // 条形图、折线图
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      this.request.get("/echarts/example").then(res => {
        console.log("条形图数据x:" + res.data.x);
        console.log("条形图数据y:" + res.data.y);
        // 横坐标名称 ["合计", "城区", "镇区", "乡村"]
        this.barLineOption.xAxis.data = res.data.x
        // 条形图 [150, 230, 224, 218]
        this.barLineOption.series[0].data = res.data.y
        // 折线图 [150, 230, 224, 218]
        this.barLineOption.series[1].data = res.data.y
        // 数据准备完毕之后再set
        myChart.setOption(this.barLineOption);
      })
    }
  },
  mounted() {  // 页面元素渲染之后再触发

    // 条形图、折线图
    this.getBarLine();

    // 饼图
    var pieOption = {
      title: {
        text: '数量统计饼图',
        subtext: '比例图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '60%',
          label:{            //饼图图形上的文本标签
            normal:{
              show:true,
              position:'inner', //标签的位置
              textStyle : {
                fontWeight : 300 ,
                fontSize : 14,    //文字的字体大小
                color: "#fff"
              },
              formatter:'{d}%'
            }
          },
          data: [],  // 填空
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);

    this.request.get("/echarts/members").then(res => {
      console.log("饼图数据：" + res.data);
      //下面+的数字是为了查看效果证明饼图没问题，后面有真实数据了就去掉吧
      pieOption.series[0].data = [
        {name: "合计", value: res.data[0] + 105},
        {name: "城区", value: res.data[1] + 20},
        {name: "镇区", value: res.data[2] + 30},
        {name: "乡村", value: res.data[3] + 55},
      ]
      pieChart.setOption(pieOption)
    })

  }
}
</script>

<style scoped>

</style>