springboot,vue,echart,mysql資料可視化-男女比例圖-需求資料不存盤在資料庫中

由于自己的專案需要大資料可視化，所以就得學習，對于資料的處理就是一個難事，我在想如何對男女這個資料進行處理，因為兩個資料不可能專門為此資料建一張表去存盤，所以我就想到需要hashmap這種形式去存盤，應為hashmap的特性，所以我將hashmap的鍵值對轉換為list,用戶的性別男女是存盤在用戶表中的，需要使用sql去計算男女人數，代碼如下：

后端代碼：
controller：

package com.controller;

import com.alibaba.fastjson.JSON;
import com.entity.Problem;
import com.entity.R;
import com.github.pagehelper.PageInfo;
import com.service.DrugInfoService;
import com.service.YonghuService;
import com.service.impl.YonghuServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.*;

@RequestMapping("/dashuju")
@RestController
public class DashujuController {
    @Autowired
    private YonghuService yonghuService;

    @RequestMapping("/getnannv")
    public R list2() {
        String sex="男";
        String sex1="女";
        HashMap<String,Object> map=new HashMap<>();
        List<String> name=new ArrayList<>();
        List<Integer> value=new ArrayList<>();
        int man=yonghuService.getyonghunan(sex);
        int woman=yonghuService.getyonghunan(sex1);
        name.add(sex);
        name.add(sex1);
        value.add(man);
        value.add(woman);
        map.put("name",name);
        map.put("value",value);
        System.out.println(map);
        System.out.println(map);
        return R.ok().put("data",map);
    }
}

Dao層
部分代碼：

//   大資料展示資料
   int getyonghunan(String xingbie);

mybatis.xml

用于統計資料的男女總數

<select id="getyonghunan" parameterType="com.entity.Yonghu"  resultType="java.lang.Integer">
		SELECT COUNT(*)
		FROM yonghu AS s
		WHERE s.xingbie =#{xingbie}
	</select>

前端核心代碼：
對于echart的安裝需要自己去安裝，我就不在寫了

<template>
  <div>
    <div class="logo">
      <p>大資料展示</p>

    </div>
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
<!--    <button @click="draw">點擊重繪</button>-->
  </div>


</template>

<script>
export default {
  name: 'dashuju',
  data () {
    return {
      name: [],
      value: [],
    }
  },
  mounted(){
    this.drawLine();
  },
  created() {
    this.draw();
  },
  methods: {
    drawLine(){
      // 基于準備好的dom，初始化echarts實體
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 繪制圖表
      myChart.setOption({
        title: { text: '使用性別比例' },
        tooltip: {},
        xAxis: {
          data: this.name
        },
        yAxis: {},
        series: [{
          name: '人數',
          type: 'bar',
          data: this.value
        }]
      });
    },
    draw(){
      this.$http({
        url: "dashuju/getnannv",
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data.data)
          console.log(data.data)
          this.name=data.data.name;
          this.value=data.data.value;
          console.log(this.name)
          console.log(this.value)
          this.drawLine()
        }
      })
    }
  }
}
</script>

<style scoped>
.logo{
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}
</style>

大功完成，哈哈哈，點個贊在走唄