@Data @NoArgsConstructor @AllArgsConstructor public class ResultVO { private int code; private String msg; private Object data; } @AllArgsConstructor @NoArgsConstructor @Data public class Fruit { private int id; private String fruitName; private int num; private int price; } @Mapper @Component public interface FruitMapper { public List<Fruit> findAllFruits(); } <mapper namespace="com.example.mapper.FruitMapper"> <select id="findAllFruits" resultType="Fruit"> select * from fruit </select> </mapper> public interface FruitService { public ResultVO findAllFruits(); } @Service public class FruitServiceImpl implements FruitService { @Autowired private FruitMapper fruitMapper; @Override public ResultVO findAllFruits() { List<Fruit> fruits = fruitMapper.findAllFruits(); if(fruits == null){ return new ResultVO( 404 , "数据库为空", null); }else { return new ResultVO(200, "查找成功", fruits); } } } @RestController @CrossOrigin public class FruitController { @Autowired private FruitService fruitService; @RequestMapping("/fruit") public ResultVO findAllFruits(){ return fruitService.findAllFruits(); } }(根据我写的代码,帮我写一个vue前端页面,展示出图表,用到vue+elementui+echarts+axios技术)
时间: 2024-04-11 21:28:55 浏览: 13
以下是一个简单的Vue前端页面,使用了Vue、Element UI、ECharts和Axios技术来展示图表。你可以在这个页面上进行修改和定制,以适应你的需求。
```vue
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>水果销售统计</span>
</div>
<el-row>
<el-col :span="12">
<el-select v-model="selectedFruit" placeholder="请选择水果" @change="getFruitSalesData">
<el-option
v-for="fruit in fruits"
:key="fruit.id"
:label="fruit.fruitName"
:value="fruit.id"
></el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div ref="chart" style="height: 400px;"></div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
data() {
return {
fruits: [], // 水果列表
selectedFruit: '', // 选中的水果
};
},
mounted() {
this.getFruits();
},
methods: {
getFruits() {
// 获取水果列表
axios.get('/api/fruits').then(response => {
this.fruits = response.data.data;
}).catch(error => {
console.error(error);
});
},
getFruitSalesData() {
// 获取选中水果的销售数据
axios.get(`/api/fruit-sales/${this.selectedFruit}`).then(response => {
const salesData = response.data.data;
this.renderChart(salesData);
}).catch(error => {
console.error(error);
});
},
renderChart(data) {
// 渲染图表
const chart = echarts.init(this.$refs.chart);
const option = {
title: {
text: '水果销售统计',
left: 'center',
},
xAxis: {
type: 'category',
data: data.map(item => item.date),
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: data.map(item => item.sales),
},
],
};
chart.setOption(option);
},
},
};
</script>
<style scoped>
</style>
```
在这个代码中,我们使用了Element UI的Card、Row、Col和Select组件来构建页面布局。通过Axios库发送HTTP请求,从后端获取水果列表和选中水果的销售数据。然后,使用ECharts库来渲染柱状图,展示销售统计数据。你需要根据自己的实际情况,修改API接口的URL以及后端返回数据的格式。