这里的是根据年两分段做一个饼状图，根据性别人数制作柱状图

echarts+vue

饼状图

先写一个实体类，将查到的数据放在实体类中，写一个mapper->mapper.xml->controller
这里为了方便测试没有写service

实体类

mapper

mapper.xml
这里的SQL查到的值一定要和实体类定义的相同，要不然会报错，
SQL里的where del_flag = 0这里我是判断是否删除，可以不写

controller
这里的AjaxResult是若依自带的，将查到的数据返回到前端

前端饼状图

这里是写了按钮跳转

上张图片的@click里的值要和下面定义的相同

写完按钮，写pie页面

<template>
  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
import * as echarts from 'echarts';
import {bing} from "@/api/system/member";
export default {
  name: "pie",
  //参数
  data(){
    return{
      pName:[],//name值
      pValue:[]//value值
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getList();
    })
  },
  created() {
  },
  methods:{
    getList() {
      bing().then(res => {
        if (res.code == 200) {
          this.myEachars(res.data);
        }
      })
    },
    //饼图
    myEachars(datm){
      var datas = []
      for (let i = 0; i < datm.length; i++) {
        var item = {
          value: datm[i].value,
          name: datm[i].name,
        };
        datas.push(item);
      }
        console.log(datas);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart'));
      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "人数统计图",
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data:datas
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

写完pie页面要写跳转和接口
index.js要找对位置，里面放的是跳转的页面，name值要和上面index.vue里name值相同

member.js是index.vue页面对应的js，是若依项目代码生成的
在member.js里写对应的后端接口

这里饼状图就算完成了

柱状图

思路和饼状图一样，这里直接放我写的代码

实体类

mapper

mapper.xml

controller

上面的跳转按钮

写zhu.vue

<template>
  <div class="echart" id="mychart" :style="{width: '800px', height: '600px'}"></div>
</template>

<script>
import * as echarts from "echarts";
import {zhu} from "@/api/system/member";

export default {
  name: "zhu",
  data() {
    return {
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.list();
    });
  },
  created() {
  },
  methods: {
    list() {
      zhu().then(res => {
        if (res.code==200){
          this.zhuzhuangtu(res.data);
        }else {
          //验证失败
          this.zhuzhuangtu(null);
        }
      })

    },
    zhuzhuangtu(datm) {
      //参数拼接
      var datas = []
      var xData=[]
      if (datm==null){
        datas.push(0,0);
        xData.push("男","女");
      }else {
        for (let i = 0; i < datm.length; i++) {
          var item = {
            value: datm[i].count,
          };
          var items = {
            value: datm[i].gender,
          };
          datas.push(item);
          xData.push(items);
        }
      }



      // 基本柱状图
      const option = {
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: datas
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

在index.js写跳转页面

在member.js写后端接口

如果echarts不能使用，需要引入，这里就不写了，搜一下vue引入echarts就OK

下一篇讲一下若依点击菜单进入饼状图和柱状图