目录
前面两节都为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代码这里用了别名,聚合函数,分组,排序;看不懂的就直接使用吧