Echarts入门(SpringBoot + Vue)

已于 2023-07-01 16:55:49 修改
阅读量866 收藏 7
点赞数 1
分类专栏： Spring 学习记录 文章标签： echarts spring boot vue.js java 信息可视化
于 2023-07-01 16:43:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57504474/article/details/131491254
版权

一、Echarts简介

代码已上传至码云:echarts_boot: echarts使用demo

ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上

什么是数据可视化?

也就是可以将数据通过图表的形式展示出来，

Echarts官网:Apache ECharts

本篇文章以此柱状图为例：

二、业务背景

数据库中分别有学生表、课程表、成绩表三张表

使用echarts对 某科目全班平均分近三年变化、某个人总分数变化、某人某年各科成绩作统计和可视化操作

表结构如下：

三、数据准备

/*
 Navicat Premium Data Transfer

 Source Server         : CloudShell
 Source Server Type    : MySQL
 Source Server Version : 50736 (5.7.36)
 Source Host           : 124.70.69.186:13306
 Source Schema         : echarts_test

 Target Server Type    : MySQL
 Target Server Version : 50736 (5.7.36)
 File Encoding         : 65001

 Date: 01/07/2023 15:44:13
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for course
-- ----------------------------
DROP TABLE IF EXISTS `course`;
CREATE TABLE `course` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `cou_num` int(11) DEFAULT NULL COMMENT '课程号',
  `cou_name` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '课程名',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='课程表';

-- ----------------------------
-- Records of course
-- ----------------------------
BEGIN;
INSERT INTO `course` (`id`, `cou_num`, `cou_name`) VALUES (1, 1, '语文');
INSERT INTO `course` (`id`, `cou_num`, `cou_name`) VALUES (2, 2, '数学');
INSERT INTO `course` (`id`, `cou_num`, `cou_name`) VALUES (3, 3, '英语');
COMMIT;

-- ----------------------------
-- Table structure for score
-- ----------------------------
DROP TABLE IF EXISTS `score`;
CREATE TABLE `score` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `cou_num` int(11) NOT NULL COMMENT '课程号',
  `stu_num` int(11) NOT NULL COMMENT '学号',
  `score` int(11) DEFAULT NULL COMMENT '成绩',
  `time` timestamp NULL DEFAULT NULL COMMENT '时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='成绩表';

-- ----------------------------
-- Records of score
-- ----------------------------
BEGIN;
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (1, 1, 1, 90, '2023-06-30 09:57:19');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (2, 2, 1, 88, '2023-06-30 09:57:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (3, 3, 1, 95, '2023-06-30 09:57:42');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (4, 1, 2, 70, '2023-06-30 09:57:54');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (5, 2, 2, 99, '2023-06-30 09:58:04');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (6, 3, 2, 60, '2023-06-30 09:58:12');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (7, 1, 3, 56, '2023-06-30 09:58:20');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (8, 2, 3, 32, '2023-06-30 09:58:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (9, 3, 3, 43, '2022-06-30 09:58:48');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (10, 1, 1, 88, '2022-06-30 09:57:19');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (11, 2, 1, 86, '2022-06-30 09:57:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (12, 3, 1, 93, '2022-06-30 09:57:42');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (13, 1, 2, 70, '2022-06-30 09:57:54');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (14, 2, 2, 99, '2022-06-30 09:58:04');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (15, 3, 2, 60, '2022-06-30 09:58:12');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (16, 1, 3, 56, '2022-06-30 09:58:20');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (17, 2, 3, 32, '2022-06-30 09:58:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (18, 3, 3, 43, '2022-06-30 09:58:48');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (19, 1, 1, 86, '2021-06-30 09:57:19');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (20, 2, 1, 84, '2021-06-30 09:57:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (21, 3, 1, 91, '2021-06-30 09:57:42');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (22, 1, 2, 70, '2021-06-30 09:57:54');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (23, 2, 2, 99, '2021-06-30 09:58:04');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (24, 3, 2, 60, '2021-06-30 09:58:12');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (25, 1, 3, 56, '2021-06-30 09:58:20');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (26, 2, 3, 32, '2021-06-30 09:58:31');
INSERT INTO `score` (`id`, `cou_num`, `stu_num`, `score`, `time`) VALUES (27, 3, 3, 43, '2021-06-30 09:58:48');
COMMIT;

-- ----------------------------
-- Table structure for student
-- ----------------------------
DROP TABLE IF EXISTS `student`;
CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `stu_num` int(11) NOT NULL COMMENT '学号',
  `stu_name` varchar(255) COLLATE utf8mb4_bin NOT NULL COMMENT '姓名',
  `stu_sex` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '性别',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='学生表';

-- ----------------------------
-- Records of student
-- ----------------------------
BEGIN;
INSERT INTO `student` (`id`, `stu_num`, `stu_name`, `stu_sex`) VALUES (1, 1, '张三', '男');
INSERT INTO `student` (`id`, `stu_num`, `stu_name`, `stu_sex`) VALUES (2, 2, '李四', '女');
INSERT INTO `student` (`id`, `stu_num`, `stu_name`, `stu_sex`) VALUES (3, 3, '王五', '男');
COMMIT;

SET FOREIGN_KEY_CHECKS = 1;

四、构建后端工程 

1.添加依赖

mysql、mybaits-plus和lombok

<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>

        <!-- mybaits-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.0</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.11</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.1</version>
            <scope>test</scope>
        </dependency>

 2.编辑配置文件

server:
  port: 18889
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/echarts_test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&AllowPublicKeyRetrieval=True&useSSL=false
    username: root
    password: root


mybatis-plus:
  mapper-locations: mapper/*.xml
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true
  type-aliases-package: com.crazyk.echartsboot.bo

 3.根据数据库表结构构件项目包和类

以学生实体为例 

实体类

package com.crazyk.echartsboot.bo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * @program: EchartsBoot
 * @description: 学生实体
 * @author: CrazyK
 * @create: 2023-06-30 10:02
 **/
@Data
@TableName("student")
public class Student {

    @TableId(type = IdType.AUTO)
    private Integer id;

    /**
     * 学号
     */
    private Integer stuNum;

    /**
     * 姓名
     */
    private String stuName;

    /**
     * 性别
     */
    private String StuSex;
}

 mapper接口

package com.crazyk.echartsboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.crazyk.echartsboot.bo.Student;
import org.apache.ibatis.annotations.Mapper;

/**
 * @program: EchartsBoot
 * @description: 学生接口
 * @author: CrazyK
 * @create: 2023-06-30 10:08
 **/
@Mapper
public interface StudentMapper extends BaseMapper<Student> {
}

 service实现类

package com.crazyk.echartsboot.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.crazyk.echartsboot.bo.Student;
import com.crazyk.echartsboot.mapper.StudentMapper;
import org.springframework.stereotype.Service;

/**
 * @program: EchartsBoot
 * @description: 学生服务
 * @author: CrazyK
 * @create: 2023-06-30 10:10
 **/
@Service
public class StudentService extends ServiceImpl<StudentMapper, Student> {
}

 controller控制类

package com.crazyk.echartsboot.controller;

import com.crazyk.echartsboot.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.stream.Collectors;

/**
 * @program: EchartsBoot
 * @description: 学生控制层
 * @author: CrazyK
 * @create: 2023-06-30 10:12
 **/
@RestController
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private StudentService studentService;
    
}

 mapper.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.crazyk.echartsboot.mapper.StudentMapper">

</mapper>

 4.编写业务代码

博主太懒了，不想写sql，所以用的stream

package com.crazyk.echartsboot.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.crazyk.echartsboot.bo.Course;
import com.crazyk.echartsboot.bo.Score;
import com.crazyk.echartsboot.bo.Student;
import com.crazyk.echartsboot.service.CourseService;
import com.crazyk.echartsboot.service.ScoreService;
import com.crazyk.echartsboot.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.*;
import java.util.stream.Collectors;

/**
 * @program: EchartsBoot
 * @description: 成绩控制层
 * @author: CrazyK
 * @create: 2023-06-30 10:14
 **/
@RestController
@RequestMapping("/score")
public class ScoreController {

    @Autowired
    private ScoreService scoreService;
    @Autowired
    private CourseService courseService;
    @Autowired
    private StudentService studentService;

    /**
     * 某科目全班平均分 近三年变化
     */
    @RequestMapping("avg")
    public Map<String, Integer> avg(String couName){
        Integer couNum = courseService.getOne(new QueryWrapper<Course>().eq("cou_name", couName))
                .getId();
        Map<String, List<Score>> map = scoreService.list(new QueryWrapper<Score>().eq("cou_num", couNum))
                .stream()
                .collect(Collectors.groupingBy(s -> s.getTime().toString().substring(24)));
        Map<String,Integer> res = new HashMap<>();
        for (String key : map.keySet()){
            Double average = map.get(key).stream()
                    .map(s -> s.getScore())
                    .mapToInt(Integer::valueOf)
                    .average().orElse(0D);
            Integer score = Integer.valueOf(String.valueOf(average).substring(0,2));
            res.put(key,score);
        }
        System.out.println(res);
        return res;
    }

    /**
     *  某个人总分数变化
     */
    @RequestMapping("sum")
    public Map<String,Integer> sum(String stuName){
        Integer stuNum = studentService.getOne(new QueryWrapper<Student>().eq("stu_name",stuName)).getStuNum();
        Map<String, List<Score>> map = scoreService.list(new QueryWrapper<Score>().eq("stu_num", stuNum))
                .stream()
                .collect(Collectors.groupingBy(s -> s.getTime().toString().substring(24)));
        Map<String,Integer> res = new HashMap<>();
        for (String key : map.keySet()){
            Integer sum = map.get(key).stream()
                    .map(s -> s.getScore())
                    .mapToInt(Integer::valueOf)
                    .sum();
            res.put(key,sum);
        }
        System.out.println(res);
        return res;
    }

    /**
     *  某人某年各科成绩
     */
    @RequestMapping("own")
    public Map<String,Integer> own(String stuName,String year){
        Integer stuNum = studentService.getOne(new QueryWrapper<Student>().eq("stu_name",stuName)).getStuNum();
        Map<Integer, List<Score>> map = scoreService.list(new QueryWrapper<Score>().eq("stu_num", stuNum))
                .stream()
                .filter(s -> s.getTime().toString().substring(24).equals(year))
                .collect(Collectors.groupingBy(s -> s.getCouNum()));
        Map<String,Integer> res = new HashMap<>();
        for (Integer key : map.keySet()){
            String couName = courseService.getOne(new QueryWrapper<Course>().eq("cou_num",map.get(key).get(0).getCouNum())).getCouName();
            Integer score = map.get(key).get(0).getScore();
            res.put(couName,score);
        }
        System.out.println(res);
        return res;
    }
}

5.接口测试

测试一下刚才写的三个接口

测试没问题就可以开始写前端了

五、构建前端工程

1.创建Vue工程

我创建的是vue2

vue create 项目名

部署成功后安装需要的依赖

npm install vue-router --save #vueRouter
npm i element-ui -S #element-ui
npm install echarts -S #echarts

npm install axios #axios

 2.全局引入

在main.js全局引入，这是vue项目的入口

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import * as echarts from "echarts";
import {postRequest} from "@/utils/api";
import {getRequest} from "@/utils/api";
import {putRequest} from "@/utils/api";
import {deleteRequest} from "@/utils/api";



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



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

3.配置代理 

在vue.config.js文件中添加代理，使请求转发到后端端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

let proxyObj = {}

proxyObj['/'] = {
  //websocket
  ws: false,
  //目标地址
  target: 'http://localhost:18889',
  changeOrigin: true,
  pathRewrite: {
    '^/': '/'
  }
};

module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
})

4.编写请求工具类 

api.js用于封装请求

import axios from "axios";

let base = '';

//json格式post请求
export const postRequest = (url,params) => {
    return axios({
        method: 'post',
        url: base + url,
        data:params
    })
}

//put请求
export const putRequest = (url,params) => {
    return axios({
        method: 'put',
        url:base + url,
        data:params
    })
}

//get请求
export const getRequest = (url,params) => {
    return axios({
        method: 'get',
        url:base + url,
        data:params
    })
}

//delete请求
export const deleteRequest = (url,params) => {
    return axios({
        method: 'delete',
        url:base + url,
        data:params
    })
}

 然后在main.js中引入请求封装

//插件形式使用请求
Vue.prototype.postRequest = postRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest;

 5.编写业务组件

<template>
  <div>
    <div>
      <table>
        <tr>
          <td><el-tag>请输入年份</el-tag></td>
          <td><el-input v-model="year" size="small" style="margin-left: 8px"></el-input></td>
          <td><div>&emsp;</div></td>
          <td><el-tag>请输入学生姓名</el-tag></td>
          <td><el-input v-model="stuName" size="small" style="margin-left: 8px"></el-input></td>
          <td><div>&emsp;</div></td>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="own" size="mini">查询某人某年各科成绩</el-button>
          </span>
        </tr>
        <tr>
          <td><el-tag>请输入学生姓名</el-tag></td>
          <td><el-input v-model="stuName" size="small" style="margin-left: 8px"></el-input></td>
          <td><div>&emsp;</div></td>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sum" size="mini">查询某个人总分数变化</el-button>
          </span>
        </tr>
        <tr>
          <td><el-tag>请输入科目名称</el-tag></td>
          <td><el-input v-model="couName" size="small" style="margin-left: 8px"></el-input></td>
          <td><div>&emsp;</div></td>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="avg" size="mini">查询某科目班级平均分</el-button>
          </span>
        </tr>
      </table>

    </div>
    <div style="height: 500px">
      <h2>this.titleEcharts</h2>
      <div style="height: 100%;width: 100%" ref="histChart"></div>
    </div>
  </div>

</template>

<script >
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart:null,
      option:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      },
      year:"",
      stuName:"",
      couName:"",
      titleEcharts:"输入表单信息点击按钮查询"
    }
  },
  watch: {
    seriveData: {
      deep: true,
      handler() {
        this.updateChartView()
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.histChart);
    this.updateChartView();
    window.addEventListener('resize',this.handleWindowResize);
  },
  updated() {
    this.updateChartView();
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.handleWindowResize);
  },
  methods: {
    /**
     * 某人某年各科成绩
     */
    own(){
      this.option.xAxis[0].data = [];
      this.option.series[0].data = [];
      let url = '/score/own?stuName=' + this.stuName + '&year=' + this.year;
      this.getRequest(url).then(resp => {
        console.log(resp.data)
        const map = new Map(Object.entries(resp.data));
        for (let [key,value] of map){
          this.option.xAxis[0].data.push(key);
          this.option.series[0].data.push(value);
        }
        this.titleEcharts = this.stuName + "同学" + this.year + "年各科成绩"
        this.stuName = "";
        this.year = "";
        this.updateChartView();
      });
    },
    /**
     * 某个人总分数变化
     */
    sum(){
      this.option.xAxis[0].data = [];
      this.option.series[0].data = [];
      let url = '/score/sum?stuName=' + this.stuName;
      this.getRequest(url).then(resp => {
        console.log(resp.data)
        const map = new Map(Object.entries(resp.data));
        for (let [key,value] of map){
          this.option.xAxis[0].data.push(key);
          this.option.series[0].data.push(value);
        }
        this.titleEcharts = this.stuName + "同学各年总分数变化"
        this.stuName = "";
        this.year = "";
        this.updateChartView();
      });
    },
    /**
     * 某科目班级平均分
     */
    avg(){
      this.option.xAxis[0].data = [];
      this.option.series[0].data = [];
      let url = '/score/avg?couName=' + this.couName;
      this.getRequest(url).then(resp => {
        console.log(resp.data)
        const map = new Map(Object.entries(resp.data));
        for (let [key,value] of map){
          this.option.xAxis[0].data.push(key);
          this.option.series[0].data.push(value);
        }
        this.titleEcharts = this.couName + "科目班级平均分"
        this.couName = "";
        this.updateChartView();
      });
    },
    /**
     * 更新echarts视图
     */
    updateChartView() {
      if (!this.chart) return

      this.chart.setOption(this.option, true)
    },
    /**
     * 窗口缩放时动态调整echarts大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }

  }
}
</script>

<style scoped>
h2{
  text-align: center;
  padding: 30px;
  font-size: 18px;
}

</style>

 六、页面展示

1.查询某人某年各科成绩

2.查询某个人总分数变化

3.查询某科目班级平均分

 

crazyK.
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+Spring boot架构下如何引入echarts（通用！！）
weixin_51043896的博客
08-12 599
今天想通过引入echarts来完善我的图书馆管理系统，因为搜索出来都是形形色色的，不太符合我现在的代码设计，所以就自己做实验做出来了一组最基础，最通用的代码 <template> <div class="home" ref="chart"> 测试最受欢迎书目界面 <div id="main" style="width: 1100px;height:300px;position: relative;left: 40px" >&lt
VUE+echarts的入门实例+讲解1
柠檬精哒博客
11-23 698
VUE学习之路之echarts的入门使用1 （1）字符和变量的拼接 无论是位于属性中还是方法中，字符串和变量的拼接都为 `字符串sss-${this.tabledata.message}` （2）vue中echarts的引用 1.构建容器 <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body
springboot echarts vue 柱状图
01-25
SpringBoot提供后台接口，vue作为前台，使用echarts取后台数据展示柱状图
Echarts数据可视化 Vue+SpringBoot+数据库 （一）
m0_63025433的博客
07-31 1290
图表的主要作用： - 数据展示，将一直的数据或数据分析结果通过可视化图表的方式进行展示，借助于图形化手段，清晰有效地传达与沟通信息。 - 数据分析，基于图表地 “二次分析” ，对数据地深层次挖掘。通过对图表中地特点分析，对数据进一步的洞察分析。 技术栈 - 图表绘制：Echarts - 前端：Vue - 后端：Springboot + MyBatisPlus - 编程工具：WebStorm + IDEA
Springboot+Vue前后端分离集成ECharts
weixin_59009804的博客
08-10 3842
springboot vue集成Echarts 一、Vue前端搭建获取ECharts 1.安装：从npm中获取 2.引入 ECharts 3.进入ECharts官网挑选示例 4.写路由 5.访问 二、搭建后端服务 1.在对应示例中查看数据格式 2.编写后端代码，使得返回类型为对应格式 三、前后端数据对接 1.使用axio或者request 2.将指定图表的配置项和数据写到回调当中 3.将data数据写为后端返回的对应数据...............
springboot+vue+element：echarts开发遇见问题---vue前端(二)
HMILY0811的博客
11-28 375
<template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class="u-grid-tools" slot="tools"> <el-button @click="exportExcel">导 出</el-button> ...
SpringBoot+Echarts实现请求后台数据显示饼状图
08-25
text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', ...
SpringBoot+Vue项目快速入门
web13293720476的博客
09-10 561
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
SpringBoot+vue项目实战（一）
m0_67402774的博客
06-12 8802
Node.js 官方网站下载：https://nodejs.org/en/ 2.选择操作系统对应的包 下载完成，安装包如下： 傻瓜式安装，直接下一步即可 安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号： 3.配置npm在安装全局模块时的路径和缓存cache的路径 因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名App
个人毕设基于SpringBoot+Vue实现前后端分离的在线教育平台源码+数据库+项目说明（含前端+后端）.zip
最新发布
07-02
基于SpringBoot+Vue实现前后端分离的在线教育平台源码+数据库+项目说明（含前端+后端）.zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信...
springboot动态加载Echarts柱状图
08-25
主要为大家详细介绍了springboot动态加载Echarts柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
SpringBoot+Echarts实例
03-19
利用Echarts与Java开发的一个可视化程序样例，通过Eclipse或者IDEA打开可运行,数据完美展示必备神器!
spring boot动态加载Echart饼状图
08-25
主要为大家详细介绍了spring boot动态加载Echart饼状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程
2401_83739434的博客
04-10 705
===我这里就以这个图书信息作为今天教程讲解的数据部分，从中提取图书名称(name)和图书数量(num)​后端==我们先从后端敲起，定义好RESTful接口，这里我们采用集成JPA来访问操作数据库创建一个SpringBoot项目在左侧中找到右边框出来的这几个依赖，勾选上选择自动导入依赖（没有显示也没事），到这里一个基本SpringBoot项目就创建好了Application配置Book类（bean数据层）
springboot+vue+element：echarts开发遇见问题---后端sql(三)
HMILY0811的博客
11-28 208
<select id="getSumRequestRankingCount" parameterType="java.lang.String" resultType="com.linewell.zhzf.api.gateway.gateway.config.log.requestlog.bean.ServiceInvokeRankingDto"> ...
Vue结合ECharts与SpringBoot，实现高效数据库图表绘制
Yaml4的博客
04-17 1201
ECharts 提供了丰富的图表类型和交互功能，可以满足各种数据可视化需求，包括折线图、柱状图、饼图、雷达图、散点图等等。ECharts 的默认主题和样式非常漂亮，同时也支持自定义主题和样式，可以根据需求定制各种风格的图表。ECharts 支持在多种平台上使用，包括 PC、移动端以及各种主流浏览器，同时也支持响应式设计，适应不同屏幕大小。ECharts 的 API 设计简单易懂，文档详尽，学习曲线较为平缓，即使对于新手也比较容易上手。
SpringBoot+Vue整合E chart图表
活在当下的博客
06-16 1229
1.ECharts： 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。1.环境配置2.后端传数据3.数据绑定，实现数据可视化下载 引入 2.后端传数据 通过axios请求数据，并绑定tableDate 3.数据绑定，实现数据可视化 前端完整代码，这里用了Element Ui，initCharts()这个方法实现数据的绑定和图标的展示...
如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程）
热门推荐
小袁同学的博客
01-03 2万+
今天要介绍的是如何实现通过SpringBoot+Vue前后端分离，将数据从数据库传递给前端达到echarts图形的展示 先看看效果图，图形中的数据是数据库中，不是假数据 目录 数据部分 后端 创建一个SpringBoot项目 Application配置 Book类（bean数据层） BookRepository接口类（DAO数据访问层） BookService接口类（业务层） BookServiceImpl实现类（业务层） BookController类（控制层） 跨域请求处理 启
使用SpringBoot+Vue+Echarts制作一个文章贡献度表
qq_17831715的博客
03-18 978
使用SpringBoot+Vue+Echarts制作一个文章贡献度表 前言 最近想给博客做一个类似于码云代码提交记录的图表，就类似于下面这样的 然后将每天的博客提交的博客生成对应的记录，下面先看最终的结果图 有点不一样的地方是，这里使用圆圈的大小，来表示提交的次数 制作博客贡献表 这个博客贡献表是使用了ECharts中的 calendar-effectscatter 组件：点我传送 首先附上...
SpringBoot+Vue开发环境配置指南
"SpringBoot+VUE开发环境搭建" 在现代软件开发中，SpringBoot和Vue.js是两个非常流行的技术框架，分别用于后端和前端开发。本资源主要讲解如何搭建一个整合SpringBoot后端和Vue.js前端的开发环境。以下是详细步骤：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值