通用后台管理系统
该系统主要结合
Element组件编辑前端，后端实现业务逻辑，组成一个简单的前后端分离项目。
该部分主要介绍画图功能的实现
使用组件：Echarts
折线图
需要渲染的数据：
orderData: {
data: [{
小米: 12.5,苹果: 11.2,华为: 9.8,oppo: 4.5,vivo: 4.0,}, {
小米: 15.0,华为: 14.5,oppo: 8.1,vivo: 8.1,苹果: 13.4,},{
小米: 8.9,华为: 16.4,oppo: 16.8,vivo: 14.8,苹果: 9.6,},{
小米: 12.4,华为: 20.4,oppo: 18.1,vivo: 15.4,苹果: 9.3,},{
小米: 13.1,华为: 12.7,oppo: 19.8,vivo: 19.1,苹果: 9.1,},{
小米: 10.5,华为: 38.5,oppo: 17.8,vivo: 17.0,苹果: 7.5,},{
小米: 12,华为: 37,oppo: 18,vivo: 18,苹果: 10,},{
小米: 15,华为: 12,oppo: 21,vivo: 21.5,苹果: 15,},{
小米: 13,华为: 18,oppo: 18,vivo: 18.5,苹果: 18,},{
小米: 13,华为: 16,oppo: 18,vivo: 18.5,苹果: 16,},],
date: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"]},
方法写在mounted()生命周期中
// 基于准备好的dom，初始化echarts实例
const echarts1 = echarts.init(this.$refs.echarts1)
// 指定图表的配置项和数据
const echarts1Option = {
};
// 处理数据xAxis
// 通过方法获取它的枚举值
console.log(this.orderData.data)
const xAxis = Object.keys(this.orderData.data[0])
echarts1Option.xAxis = {
data: this.orderData.date
}
echarts1Option.yAxis = {
}
echarts1Option.legend = {
data: xAxis
}
echarts1Option.series = []
xAxis.forEach(key => {
echarts1Option.series.push({
name: key,
data: this.orderData.data.map(item => item[key]),
type: 'line'
})
})
// 根据配置显示图表
echarts1.setOption(echarts1Option)
效果：
柱状图
数据：
userData: [{
new: 2000,active: 1000,date: '2021-11-21'},{
new: 500,active: 1000,date: '2022-11-21'},{
new: 2000,active: 1200,date: '2023-11-21'},]
方法写在mounted()生命周期中
// 基于准备好的dom，初始化echarts实例
const echarts2 = echarts.init(this.$refs.echarts2)
// 指定图表的配置项和数据
const echarts2Option = {
legend: {
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: this.userData.map(item => item.date),
axisLine: {
lineStyle: {
color: "#17b3a3",
},
axisLabel: {
interval: 0,
color: "#333",
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#17b3a3",
},
}
},
series: [
{
name: '新增用户',
data: this.userData.map(item => item.new),
type: 'bar'
},
{
name: '活跃用户',
data: this.userData.map(item => item.active),
type: 'bar'
},
]
}
echarts2.setOption(echarts2Option)
效果
饼状图
使用数据库中的数据
表结构和内容：videodata
引入后端接口
import {
getVideoData} from '../api'
前端代码
// 饼状图
const echarts3 = echarts.init(this.$refs.echarts3)
const echarts3Option = {
tooltip: {
trigger: 'item',
},
color: ['#0094ff','#00c1de','#00e7c6','#00f999','#00ff66','#66ff33','#99ff00'],
series: [{
data: videoData,type: 'pie'}
],
}
echarts3.setOption(echarts3Option)
后端部分代码
controller层
@GetMapping("/getVideoData")
public ResultHelper getVideoData(){
List<Videodata> res = homeService.getVideoData();
if (res.size() > 0) return ResultHelper.success(res);
else return ResultHelper.fail("获取数据失败");
}
mapper sql语句
<select id="getVideoData" resultType="com.example.generalback.model.entity.Videodata">
SELECT * FROM videodata;
</select>
效果
页面
<el-card style="height: 280px; ">
<!--折线图-->
<div ref="echarts1" style="height: 280px"></div>
</el-card>
<div class="graph">
<el-card style="height: 260px">
<!-- 柱状图 -->
<div ref="echarts2" style="height: 260px"></div>
</el-card>
<el-card style="height: 260px">
<!-- 饼状图 -->
<div ref="echarts3" style="height: 240px"></div>
</el-card>
</div>