Vue使用Echarts(内容结合了Springboot后端)

目录

1、环境准备

2、全局引入

3、使用图表

3.1、前端

3.2、后端

---

前面两节都为Vue项目中操作

1、环境准备

安装Echarts，在项目路径打开终端，输入以下命令安装Echarts

npm install echarts -S

安装后注意看pack.json文件中echarts版本

版本不同，引入方法也会不同，具体可看我另一篇文章

不同版本的引入方法http://t.csdn.cn/unxZC

2、全局引入

在main.js文件中进行全局引入

import * as echarts from 'echarts';

// 全局注册 echarts 变量
Vue.prototype.$echarts = echarts;

3、使用图表

3.1、前端

这里放入了1个示例，拆分讲解看下面

<template>
   <div>
       <el-card shadow="hover">
          <div ref="barChart" class="echart"></div>
       </el-card>
   </div>
</template>
<script>
import {getRequest, postRequest} from "../../utils/api";  //封装的请求api，每个人的不同

export default {
  name: 'home',
  data() {
    return{
      echartOptions: {
        title: { text: "近期每日用户注册数" },
        xAxis: {
          type: 'category',
          data: [], // 日期数据将在获取数据后填充
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: "注册数",
            data: [], // 注册数据将在获取数据后填充
            type: 'bar',
          },
        ]
      }
    }

  },

  mounted() {
    this.fetchPurchaseData();    //放入钩子函数，使其可以进入页面就进行加载
  },


  methods: {
    fetchPurchaseData() {
      getRequest('/root/7dayuser')
          .then(resp => {
            const data = resp.data;
            const dates = data.map(item => item.register_date);
            const counts = data.map(item => item.register_count);

            this.echartOptions.xAxis.data = dates;
            this.echartOptions.series[0].data = counts;

            // 使用 ECharts 渲染图表
            this.renderEChart(this.$refs.barChart, this.echartOptions);
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
    },
    renderEChart(dom, options) {
      const myChart = this.$echarts.init(dom);
      myChart.setOption(options);
    }
  }
};

<style scoped>
.echart {
  width: 100%;
  height: 300px;
}
</style>

简单讲解下（分为3步）：

1、在组件中构建一个DOM用于放图表，CSS样式在上面示例的最下面

<template>
   <div>
       <el-card shadow="hover">
          <div ref="barChart" class="echart"></div>
       </el-card>
   </div>
</template>

<style scoped>
.echart {
  width: 100%;
  height: 300px;
}
</style>

2、设置数据对象(用于存储后端发送的数据信息)

  data() {
    return{
      echartOptions: {
        title: { text: "近期每日用户注册数" },
        xAxis: {
          type: 'category',
          data: [], // 日期数据将在获取数据后填充
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: "注册数",
            data: [], // 注册数据将在获取数据后填充
            type: 'bar',
          },
        ]
      }
    }

  },

3、从后端获取到数据，再渲染到Echarts图表中(需要将函数方法放入到钩子函数中，以便打开页面就进行加载)

mounted() {
    this.fetchPurchaseData();    //放入钩子函数，使其可以进入页面就进行加载
  },


  methods: {
    fetchPurchaseData() {
      getRequest('/root/7dayuser')
          .then(resp => {
            const data = resp.data;
            const dates = data.map(item => item.register_date);
            const counts = data.map(item => item.register_count);

            this.echartOptions.xAxis.data = dates;
            this.echartOptions.series[0].data = counts;

            // 使用 ECharts 渲染图表
            this.renderEChart(this.$refs.barChart, this.echartOptions);
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
    },
    renderEChart(dom, options) {
      const myChart = this.$echarts.init(dom);
      myChart.setOption(options);
    }
  }

示例中的封装API如下，每个人的不同，也可以使用原始的axios进行请求

import axios from 'axios';

// 创建 Axios 实例
const request = axios.create({
    baseURL: '',
    timeout: 5000
});


// 封装不同类型请求
export const postRequest = (url, params) => {
    return request({
        method: 'post',
        url: `${url}`,
        data: params
    });
};

export const getRequest = (url) => {
    return request({
        method: 'get',
        url: `${url}`
    });
};

export const deleteRequest = (url, params) => {
    return request({
        method: 'delete',
        url: `${url}`,
        data: params
    });
};

export const putRequest = (url, params) => {
    return request({
        method: 'put',
        url: `${url}`,
        data: params
    });
};

export default request;

3.2、后端

Controller层(这里的return也使用了工具类封装)

    //查看前7天的注册数量
    @GetMapping("/7dayuser")
    public R getUserCountsLast7Days() {
        return R.ok("success",userMapper.getUserCountsLast7Day());
    }

Mapper对应的XML映射文件

  <select id="getUserCountsLast7Day" resultType="java.util.Map">
    SELECT DATE(createtime) AS register_date, COUNT(*) AS register_count FROM user WHERE createtime >= DATE_SUB(CURDATE(), INTERVAL 7 DAY) GROUP BY register_date ORDER BY register_date;
  </select>

Mysql代码这里用了别名，聚合函数，分组，排序；看不懂的就直接使用吧