前言
由于笔者主攻的是后端代码开发，所以前端页面写的较为简陋，能展示效果即可，对于各种展示效果均从各自官网引用。
一、EChart
大致代码内容从官网复制粘贴即可，需要修改的内容基本加上了注释。
https://echarts.apache.org/zh/index.html二、前端代码示例
本次前端页面运用的是Vue和Elment框架进行书写。
话不多说，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
<link rel="stylesheet" href="../../styles/common.css"/>
<link rel="stylesheet" href="../../styles/page.css"/>
<style>
#member-app .notAdmin::after {
border: 0 !important;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div class="dashboard-container" id="app">
<div class="container">
<el-container>
<el-aside width="1200px">
<div id="barChart" style="width: 900px;height: 700px">1</div>
</el-aside>
<el-main>
<div id="pieChart" style="width: 800px;height:700px;">2</div>
</el-main>
</el-container>
</div>
</div>
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
mounted() {
this.bar();
this.pie();
},
created() {
},
methods: {
bar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('barChart'));
//创建两个空的数组
var orderName = [];
var orderCount = [];
axios.get('http://localhost:8080/order/bar').then(res => {
console.log(res);
var json = res.data;
//遍历json数组，再把数组中的分开分装到不同的数组中
for (var i = 0; i < json.length; i++) {
orderName.push(json[i].name);
orderCount.push(json[i].count);
}
myChart.setOption({
//width: 800, height: 800,
title: {
text: '瑞吉菜品订单销量表'
},
tooltip: {},
legend: {
left: 600,
data: ['销量']
},
grid:{
y2:140
},
xAxis: {
name: '菜品名称',//横轴名称
data: orderName,//横轴的数据
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
}
},
yAxis: {
name: '销售数量',//纵轴名称
},
series: [
{
name: '销量',
type: 'bar',
data: orderCount//纵轴的数据
}
]
});
})
},
pie() {
var myChart = echarts.init(document.getElementById('pieChart'));
axios.get('http://localhost:8080/order/pie').then(res => {
myChart.setOption({
title: {
text: '瑞吉菜品总销售额',
left: '60%,40%'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
center:["70%","50%"],//调整饼图的位置,左边表示左右距离,右边表示上下距离
name: '总销售额',
type: 'pie', // 设置图表类型为饼图
radius: '40%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: res.data //饼图内接受的数据
}
]
});
})
},
}
})
</script>
</body>
</html>前端接收的数据格式分别是：
柱状图：
饼图：
注意：饼状图的数据格式固定式 value：和name：的，所以创建的成员变量的名称要保持一致
最后展示效果如下：
三、后端代码示例
后端运用的ssm三层架构书写，笔者认为这种无需根据参数的数据查询，直接写sql语句配合构建新的实体类通过集合封装数据要更为简单易懂。
//mapper层
@Select("select name,count(*) count from order_detail group by name")
public List<Bar> getBar();
@Select("select count*amount value,name from (select amount,name,count(*) count from order_detail group by name) r")
public List<Pie> getPie();
//service实现层
@Override
public List<Bar> getBar() {
List<Bar> bar = ordersMapper.getBar();
return bar;
}
@Override
public List<Pie> getPie() {
return ordersMapper.getPie();
}
//controller层
@GetMapping("/bar")
public List<Bar> selectBar(){
List<Bar> bar = ordersService.getBar();
return bar;
}
@GetMapping("/pie")
public List<Pie> selectPie(){
List<Pie> pie = ordersService.getPie();
return pie;
}
两个实体类则更为简单，只需对应要接受的数据创建即可：
@Data
public class Bar {
private String name;
private int count;
}
@Data
public class Pie {
private int value;
private String name;
}