vue+springboot+mybatisplus 水果统计

新建springboot项目，内建vue模块

 mysql数据库

drop table if exists e_fruit;
create table e_fruit(
	id int not null auto_increment primary key comment 'id',
	fruit_name varchar(30) not null comment '水果名称',
	sale_count int not null comment '销售数量',
	icon varchar(500) default null comment '图标'
) comment '水果表';

insert into e_fruit(fruit_name,sale_count) values ('苹果',100);
insert into e_fruit(fruit_name,sale_count) values ('香蕉',200);
insert into e_fruit(fruit_name,sale_count) values ('橘子',40);

springboot

配置

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.15</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.shrimpking</groupId>
    <artifactId>springboot-vue-test05</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-vue-test05</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.30</version>
        </dependency>
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>spring-boot-starter-swagger</artifactId>
            <version>1.5.1.RELEASE</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.properties

server.port=8089

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=mysql123

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#配置别名
mybatis-plus.type-aliases-package=com.shrimpking.pojo

#mybatis-plus.mapper-locations=

Pojo

Fruit.java

package com.shrimpking.pojo;

import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;

/**
 * <p>
 * 水果表
 * </p>
 *
 * @author shrimpking
 * @since 2023-08-26
 */
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("e_fruit")
@ApiModel(value="Fruit对象", description="水果表")
public class Fruit implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    @ApiModelProperty(value = "水果名称")
    private String fruitName;

    @ApiModelProperty(value = "销售数量")
    private Integer saleCount;

    @ApiModelProperty(value = "图标")
    private String icon;


}

mapper

FruitMapper.java

package com.shrimpking.mapper;

import com.shrimpking.pojo.Fruit;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
 * <p>
 * 水果表 Mapper 接口
 * </p>
 *
 * @author shrimpking
 * @since 2023-08-26
 */
public interface FruitMapper extends BaseMapper<Fruit> {

}

FruitMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shrimpking.mapper.FruitMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.shrimpking.pojo.Fruit">
        <id column="id" property="id" />
        <result column="fruit_name" property="fruitName" />
        <result column="sale_count" property="saleCount" />
        <result column="icon" property="icon" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        id, fruit_name, sale_count, icon
    </sql>

</mapper>

service

FruitService.java

package com.shrimpking.service;

import com.shrimpking.pojo.Fruit;
import com.baomidou.mybatisplus.extension.service.IService;
import com.shrimpking.vo.BarVO;
import com.shrimpking.vo.PieVO;

import java.util.List;

/**
 * <p>
 * 水果表 服务类
 * </p>
 *
 * @author shrimpking
 * @since 2023-08-26
 */
public interface FruitService extends IService<Fruit> {
    public BarVO barVoList();

    public List<PieVO> pieVoList();
}

FruitServiceImpl

package com.shrimpking.service.impl;

import com.shrimpking.pojo.Fruit;
import com.shrimpking.mapper.FruitMapper;
import com.shrimpking.service.FruitService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.shrimpking.utils.DataUtil;
import com.shrimpking.vo.BarVO;
import com.shrimpking.vo.DataVO;
import com.shrimpking.vo.PieVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * <p>
 * 水果表 服务实现类
 * </p>
 *
 * @author shrimpking
 * @since 2023-08-26
 */
@Service
public class FruitServiceImpl extends ServiceImpl<FruitMapper, Fruit> implements FruitService {

    @Autowired
    private FruitMapper fruitMapper;

    @Override
    public BarVO barVoList()
    {
        BarVO barVO = new BarVO();
        List<String> names = new ArrayList<>();
        List<DataVO> values = new ArrayList<>();

        //先查询数据，在转换格式
        List<Fruit> fruits = this.fruitMapper.selectList(null);

        for (Fruit fruit : fruits)
        {
            names.add(fruit.getFruitName());

            DataVO dataVO = new DataVO();
            dataVO.setValue(fruit.getSaleCount());
//            Map<String,String> map = new HashMap<>();
//            map.put("color","#3fb1e3");
//            dataVO.setItemStyle(map);
            dataVO.setItemStyle(DataUtil.createItemStyle(fruit.getSaleCount()));
            values.add(dataVO);
        }
        barVO.setNames(names);
        barVO.setValues(values);
        return barVO;
    }

    @Override
    public List<PieVO> pieVoList()
    {
        List<PieVO> pieVOList = new ArrayList<>();
        List<Fruit> fruits = this.fruitMapper.selectList(null);
        for (Fruit fruit : fruits)
        {
            PieVO pieVO = new PieVO();
            pieVO.setValue(fruit.getSaleCount());
            pieVO.setName(fruit.getFruitName());
            pieVO.setItemStyle(DataUtil.createItemStyle(fruit.getSaleCount()));
            pieVOList.add(pieVO);
        }
        return pieVOList;
    }
}

Controller

FruitController.java

package com.shrimpking.controller;


import com.shrimpking.pojo.Fruit;
import com.shrimpking.service.FruitService;
import com.shrimpking.vo.BarVO;
import com.shrimpking.vo.PieVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * <p>
 * 水果表 前端控制器
 * </p>
 *
 * @author shrimpking
 * @since 2023-08-26
 */
@RestController
@RequestMapping("/fruit")
public class FruitController {

    @Autowired
    private FruitService fruitService;

    //获取列表
    @GetMapping("/list")
    public List<Fruit> list(){
        return this.fruitService.list();
    }

    //删除
    @DeleteMapping("/delete/{id}")
    public boolean delete(@PathVariable("id") Integer id){
        return this.fruitService.removeById(id);
    }

    //编辑，根据id查询
    @GetMapping("/find/{id}")
    public Fruit find(@PathVariable("id") Integer id){
        return this.fruitService.getById(id);
    }

    //更新
    @PutMapping("/update")
    public boolean update(@RequestBody Fruit fruit){
        return this.fruitService.updateById(fruit);
    }

    //保存
    @PostMapping("/save")
    public boolean save(@RequestBody Fruit fruit){
        return this.fruitService.save(fruit);
    }

    //返回柱状图数据
    @GetMapping("/barVo")
    public BarVO barVO()
    {
        return this.fruitService.barVoList();
    }

    @GetMapping("/pieVo")
    public List<PieVO> pieVO(){
        return this.fruitService.pieVoList();
    }
}

config

CorsConfig.java

package com.shrimpking.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author user1
 * 案例 一
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer
{
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

utils

datautil.java

package com.shrimpking.utils;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/27 9:41
 */
public class DataUtil
{
    public static Map<String,String> createItemStyle(Integer count){
        String color = "";

        if (count < 60){
            color = "#96dee8";
        }
        if (count > 60 && count < 160){
            color = "#c4ebad";
        }
        if (count > 160 && count < 300){
            color = "#6be6c1";
        }
        if (count > 300 && count < 500){
            color = "#3fb1e3";
        }
        if (count > 500 ){
            color = "#a0a7e6";
        }

        Map<String,String> map = new HashMap<>();
        map.put("color",color);
        return map;
    }
}

Vo

barvo.java

package com.shrimpking.vo;

import lombok.Data;

import java.util.List;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/27 9:20
 */
@Data
public class BarVO
{
    private List<String> names;
    private List<DataVO> values;
}

datavo.java

package com.shrimpking.vo;

import lombok.Data;

import java.util.Map;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/27 9:23
 */
@Data
public class DataVO
{
    private Integer value;
    private Map<String,String> itemStyle;

}

pievo.java

package com.shrimpking.vo;

import lombok.Data;

import java.util.Map;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/27 18:37
 */
@Data
public class PieVO
{
    private Integer value;
    private Map<String,String> itemStyle;
    private String name;
}

vue

main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from "@/store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';
import axios from "axios";
axios.defaults.baseURL='http://localhost:8089';

Vue.prototype.$http = axios;
Vue.prototype.$echarts = echarts;
Vue.use(ElementUI,{size:'small'});
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <home></home>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from "@/components/Home";
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #app{
    width: 90%;
    margin: 0 auto;
  }
</style>

router index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import Login from "@/components/Login";
import ChartOne from "@/components/ChartOne";
import ChartTwo from "@/components/ChartTwo";
import Table from "@/components/Table";
import Edit from "@/components/Edit";
import Add from "@/components/Add";
import ChartBar from "@/components/ChartBar";
import ChartPie from "@/components/ChartPie";
import Home from "@/components/Home";

Vue.use(VueRouter);

export default new VueRouter({
   routes:[
       {
           path:'/',
           redirect:'/home'
       },
       {
           path: '/login',
           name:'Login',
           component: Login
       },
       {
           path:'/chart1',
           name:'Chart1',
           component:ChartOne
       },
       {
           path:'/chart2',
           name:'Chart2',
           component:ChartTwo
       },
       {
           path:'/table',
           name:'Table',
           component: Table
       },
       {
           path:'/edit',
           name:'Edit',
           component:Edit
       },
       {
           path:'/add',
           name:'Add',
           component:Add
       },
       {
           path:'/chartBar',
           name:'ChartBar',
           component:ChartBar
       },
       {
           path:'/chartPie',
           name:'ChartPie',
           component:ChartPie
       },
       {
           path:'/home',
           name:'Home',
           component:Home
       }
   ]
});

components

table.vue

<template>
    <div style="width: 60%;margin: 0 auto;">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="fruitName"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="saleCount"
                    label="数量">
            </el-table-column>
            <el-table-column
                    prop="icon"
                    label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.icon" alt="" style="height: 70px;">
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name:'TablePage',
        methods: {
            handleEdit(row){
                this.$router.push('/edit?id='+ row.id);
            },
            handleDelete(row) {
                //console.log(row.id);
                this.$confirm('确定要删除' + row.fruitName + '吗？','删除提示',{
                    confirmButtonText:'删除',
                    cancelButtonText:'取消',
                    type:"warning"
                }).then( () => {
                    this.$http.delete('/fruit/delete/'+ row.id)
                        .then(response => {
                            if(response){
                                this.$message.success("删除成功");
                            }
                        })
                        .then(() => {
                            this.loadData();
                    });

                }).catch( () =>{

                });
            },
            loadData(){
                this.$http.get('/fruit/list')
                    .then(response => {
                        console.log(response);
                        this.tableData = response.data;
                    });
            }
        },
        data() {
            return {
                tableData: []
            }
        },
        created(){
            //加载数据
            this.loadData();
        }
    }
</script>

login.vue

<template>
    <div>
        login
        <el-button>login</el-button>
    </div>
</template>

<script>
    export default {
        name: "LoginPage"
    }
</script>

<style scoped>

</style>

home.vue

<template>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router>
        <el-menu-item index="add">添加数据</el-menu-item>
        <el-menu-item index="table">数据列表</el-menu-item>
        <el-menu-item index="chartBar">柱状图</el-menu-item>
        <el-menu-item index="chartPie">饼图</el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        name:'HomePage',
        data() {
            return {
                activeIndex: 'add'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>

</style>

edit.vue

<template>
    <div style="width: 30%;margin: 50px auto;text-align: center;">
        <el-form ref="form" :rules="rules" :model="fruit" label-width="80px">
            <el-form-item label="ID">
                <el-input v-model="fruit.id" readonly></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="fruitName">
                <el-input v-model="fruit.fruitName"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="saleCount">
                <el-input v-model.number="fruit.saleCount" ></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="icon">
                <el-input v-model="fruit.icon" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">修改</el-button>
                <el-button @click="handelCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "EditPage",
        data(){
            return {
                fruit:{
                    id:'',
                    fruitName:'',
                    saleCount:'',
                    icon:''
                },
                rules:{
                    fruitName:[
                        {required:true, message:'请输入水果名称', trigger:'blur'}
                    ],
                    saleCount:[
                        {required:true, message:'请输入数量', trigger:'blur'},
                        { type:'number', message: '数量必须是整数'}
                    ],
                    icon: [
                        { required:true, message:'请输入图片链接地址', trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            handelCancel(){
                this.$router.push('/table');
            },
            onSubmit(formName){
                this.$refs[formName].validate( (valid) => {
                    if(valid){
                        //console.log(this.fruit);
                        this.$http.put('/fruit/update',this.fruit)
                            .then( res => {
                                if(res.data){
                                    this.$message.success('更新成功');
                                }
                            })
                            .then( () =>{
                                this.$router.push('/table');
                            })
                    }
                })
            }
        },
        created(){
            let id = this.$route.query.id;
            this.$http.get('/fruit/find/' + id)
                .then(res => {
                    //console.log(res)
                    this.fruit = res.data;
                });
        }
    }
</script>

<style scoped>

</style>

chartTwo.vue

<template>
    <div ref="myChart" style="width: 800px;height: 600px;"></div>
</template>

<script>
    export default {
        name: "ChartTwo",
        data(){
            return {

            }
        },
        mounted(){
            let myChart = this.$echarts.init(this.$refs.myChart);

            var option = {
                backgroundColor: '#2c343c',
                title: {
                    text: '水果统计',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '水果',
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '苹果' },
                            { value: 310, name: '香蕉' },
                            { value: 274, name: '橘子' },
                            { value: 235, name: '火龙果' },
                            { value: 400, name: '车厘子' }
                        ].sort(function (a, b) {
                            return a.value - b.value;
                        }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function () {
                            return Math.random() * 200;
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
    }
</script>

<style scoped>

</style>

chartPie.vue

<template>
    <div ref="myChart" style="width: 800px;height: 600px;"></div>
</template>

<script>
    export default {
        name: "ChartPie",
        data(){
            return {
                pieData:null
            }
        },
        mounted(){
            this.$http.get('/fruit/pieVo').then(res => {
                console.log(res);
                this.pieData = res.data;
            }).then( () => {
                let myChart = this.$echarts.init(this.$refs.myChart);

                var option = {
                    backgroundColor: '#2c343c',
                    title: {
                        text: '水果统计',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: '水果',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data: this.pieData.sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function () {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };

                myChart.setOption(option);
            });

        }
    }
</script>

<style scoped>

</style>

chartOne.vue

<template>
    <div id="myChart" style="width: 800px;height: 600px;"></div>
</template>

<script>
    export default {
        name: "ChartOne",
        data(){
            return {

            }
        },
        mounted(){
            let myChart = this.$echarts.init(document.getElementById('myChart'));

            myChart.setOption({
               title:{
                   text:'水果统计',
                   left:'center',
                   top:20,
                   textStyle:{
                       color: '#555555'
                   }
               },
                tooltips:{},
                xAxis:{
                   data:[
                       "苹果",
                       "香蕉",
                       "橘子",
                       "火龙果"
                   ]
                },
                yAxis:{},
                series:[{
                   name:'销量',
                    type:'bar',
                    data:[
                        {
                            value:101
                        },
                        {
                            value:201
                        },
                        {
                            value:301
                        },
                        {
                            value:67,
                            itemStyle:{
                                color:'#3fb1e3'
                            }
                        }

                    ]
                }]
            });
        }
    }
</script>

<style scoped>

</style>

chartBar.vue

<template>
    <div id="myChart" style="width: 800px;height: 600px;"></div>
</template>

<script>
    export default {
        name: "ChartBar",
        data(){
            return {
                barData:null
            }
        },
        mounted(){
            //加载数据
            this.$http.get('/fruit/barVo').then(res => {
                this.barData = res.data;
            }).then( () => {
                let myChart = this.$echarts.init(document.getElementById('myChart'));

                myChart.setOption({
                    title:{
                        text:'水果统计',
                        left:'center',
                        top:20,
                        textStyle:{
                            color: '#555555'
                        }
                    },
                    tooltip:{
                        trigger: 'item'
                    },
                    xAxis:{
                        data: this.barData.names
                    },
                    yAxis:{},
                    series:[{
                        name:'销量',
                        type:'bar',
                        data: this.barData.values
                    }]
                });
            });

        }
    }
</script>

<style scoped>

</style>

add.vue

<template>
    <div style="width: 30%;margin: 50px auto;text-align: center;">
        <el-form ref="form" :rules="rules" :model="fruit" label-width="80px">
            <el-form-item label="名称" prop="fruitName">
                <el-input v-model="fruit.fruitName"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="saleCount">
                <el-input v-model.number="fruit.saleCount" ></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="icon">
                <el-input v-model="fruit.icon" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                <el-button @click="handelCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "AddPage",
        data(){
            return {
                fruit:{
                    id:'',
                    fruitName:'',
                    saleCount:'',
                    icon:''
                },
                rules:{
                    fruitName:[
                        {required:true, message:'请输入水果名称', trigger:'blur'}
                    ],
                    saleCount:[
                        {required:true, message:'请输入数量', trigger:'blur'},
                        { type:'number', message: '数量必须是整数'}
                    ],
                    icon: [
                        { required:true, message:'请输入图片链接地址', trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            handelCancel(){
                this.$router.push('/table');
            },
            onSubmit(formName){
                this.$refs[formName].validate( (valid) => {
                    if(valid){
                        this.$http.post('/fruit/save',this.fruit)
                            .then( res => {
                                if(res.data){
                                    this.$message.success('新增成功');
                                }
                            })
                            .then( () =>{
                                this.$router.push('/table');
                            })
                    }
                })
            }
        },
        created(){
            this.fruit.icon = 'https://images.669pic.com/element_pic/64/45/65/34/5314048508e2bc8fa0934886ee222a1c.jpg';
        }
    }
</script>

<style scoped>

</style>

测试