在vue页面引入echarts,图表的数据来自数据库, springboot+mybatis+vue+elementui+echarts实现图表的制作(表中字段为:id,fruitname,num,price.做一个前端页面图表显示,和后端代码)
时间: 2024-01-31 15:04:13 浏览: 30
下面是一个使用Spring Boot、MyBatis、Vue、ElementUI和Echarts实现图表显示的示例:
首先,创建数据库表,表名为`fruit`,字段包括`id`、`fruit_name`、`num`和`price`。
在后端(Spring Boot)代码中,创建一个Fruit实体类和对应的Mapper接口,用于操作数据库:
Fruit.java:
```java
public class Fruit {
private Integer id;
private String fruitName;
private Integer num;
private Double price;
// 省略getter和setter方法
}
```
FruitMapper.java:
```java
@Mapper
public interface FruitMapper {
List<Fruit> getAllFruits();
}
```
在后端的控制器中,编写一个接口用于获取所有水果数据:
FruitController.java:
```java
@RestController
@RequestMapping("/fruits")
public class FruitController {
@Autowired
private FruitMapper fruitMapper;
@GetMapping("/")
public List<Fruit> getAllFruits() {
return fruitMapper.getAllFruits();
}
}
```
在前端(Vue)代码中,创建一个组件用于显示图表,并在其中引入Echarts和ElementUI:
Chart.vue:
```vue
<template>
<div>
<el-chart :options="chartOptions" style="height: 400px;"></el-chart>
</div>
</template>
<script>
import echarts from 'echarts'
import { Chart } from 'element-ui'
export default {
components: {
'el-chart': Chart
},
data() {
return {
chartOptions: {}
}
},
mounted() {
this.getChartData()
},
methods: {
getChartData() {
// 发送请求获取后端数据
axios.get('/fruits/')
.then(response => {
const data = response.data
// 处理数据,生成Echarts图表配置项
const options = {
title: {
text: '水果销量图表'
},
xAxis: {
data: data.map(item => item.fruitName)
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: data.map(item => item.num)
}
]
}
// 更新图表配置项
this.chartOptions = options
})
.catch(error => {
console.error(error)
})
}
}
}
</script>
```
在Vue的入口文件中,注册Chart组件并引入ElementUI的样式:
main.js:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Chart from './components/Chart.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
components: { Chart },
template: '<Chart />'
})
```
最后,在HTML文件中添加一个用于显示图表的DOM元素,并引入前端脚本文件:
index.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="main.js"></script>
</body>
</html>
```
这样,当访问页面时,会从后端获取水果数据,并使用Echarts和ElementUI在图表中显示。请根据你的实际需求进行修改。