SpringData-jpa+Vue+highcharts绘制静态数据柱状图、饼图

最新推荐文章于 2023-09-11 16:50:53 发布

暮念朝兮

最新推荐文章于 2023-09-11 16:50:53 发布

阅读量569

点赞数

本文链接：https://blog.csdn.net/weixin_43303530/article/details/103059004

版权

Vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

highchars

2 篇文章 0 订阅

订阅专栏

highcharts绘制静态数据柱状图、饼图：

实现最基本的数据柱状图、饼图

开发软件：

后台开发：Idea；
后台测试：Postman；
前端开发：VScod；

1、创建SpringBoot项目：

使用Idead点击file，选择New Project，选择Spring InitInitializr，自行配置项目的基础配置；

2、在pom.xml文件中导入依赖：

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!--添加servlet依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- 添加jstl标签库依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--添加tomcat依赖模块-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.2</version>
        </dependency>
        <!-- 用于 JSON API 文档的生成-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!--用于文档界面展示-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
    </dependencies>

3、在resource文件夹下编写application.yml配置文件：

server:
  port: 8181   #服务器启动端口号
spring:
  application:
    name:address-service
  devtools:
    restart:
      enabled: true
  datasource:   #连接池
    url: jdbc:mysql://127.0.0.1:3306/vue?useUnicode=true&serverTimezone=UTC&characterEncoding=utf-8
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: update
      show-sql: true
  mvc:
    date-format: yyyy-MM-dd
  main:
    allow-bean-definition-overriding: true

4、创建dao,service,web,entity,config等基础包并启动项目：

这里启动是为了保证项目初始环境没有任何问题，如对自己的项目有充分信心可跳过启动项目，至此构建项目完成

5、编写实体类：

import lombok.Data;

import javax.persistence.*;

@Data
@Entity
@Table(name = "charts")
public class Charts {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id",unique = true,nullable = false,length = 50)
    private Integer id;
    @Column(name = "name",nullable = false,length = 50)
    private String name;
    @Column(name = "num",nullable = false,length = 50)
    private Integer y;
}

注：实体类中使用的@Data来自lombok插件，使用该注解后，可省略代码中的get/set方法，@Table声明该实体类与数据库中表名为@Table注解后name相对应。
如何安装lombok及lombok的使用

6、编写dao：

在这里使用了jpa,对于简单的CRUD语句及其方法会由实现jpa的ORM框架进行编写，我们对其直接进行调用即可：
什么是JpaRepository及其使用

import org.springframework.data.jpa.repository.JpaRepository;

public interface ChartsDao extends JpaRepository<Charts,Integer> {
}

7、编写service及其实现（可省略service接口编写）：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class ChartsService {

    @Autowired
    private ChartsDao chartsDao;

    public List<Charts> findAll(){
        return chartsDao.findAll();
    }
}

8、编写Controller：

import com.oracle.pojo.Charts;
import com.oracle.service.ChartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class ChartsController {

@Autowired
private ChartsService chartsService;

@GetMapping("findAll")
public List<Charts> findAll(){
    return chartsService.findAll();
}

}

9、跨域实现：

由于该项目是前后端分离，不可避免的会产生跨域问题，下面是对跨域问题的解决

在config包下创建该配置文件，文件名可自行更改：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    // 初始化 CorsConfiguration 对象并设置允许的域名、请求头部信息和请求方式
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法（post、get 等）
        return corsConfiguration;
    }
    /**
     * 创建 CorsFilter 对象
     * @return CorsFilter
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new
                UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //拦截所有请求
        return new CorsFilter(source);
    }
}

10、测试：

使用Postman进行测试

Postman下载使用

测试完成，后台代码编写完成。

前台开发：

在进行前台开发前，一定要确认已安装了node.js和Vue-cli
webpack+vue2.0+nodeJs搭建环境

现在，我们进入前台页面的开发，这里我使用的前台开发软件为VScode，使用的前端框架为Vue

1、搭建Vue-cli脚手架并创建一个基于 webpack 模板的新项目：

2、启动项目确保项目初始化没有问题

3、安装axios 插件和安装 Element 插件：

安装axios：npm install --save axios vue-axios

4、导入并搭建highcharts

安装：npm install highcharts
搭建chart组件的架子：components下的commons公共目录下新建一个chart.vue文件：

<template>
  <div class="x-bar">
    <div :id="id" :option="option"></div>
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  // 验证类型
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  mounted () {
    // setTimeout(() => {
    //         console.info('饼图模板');
    //         HighCharts.chart(this.id, this.option);
    //     }, 500);

    // 静态数据，随页面打开自动创建
    // HighCharts.chart(this.id,this.option)
  },
  methods: {
    // 动态数据，当数据加载完毕再执行创建
    me () {
      HighCharts.chart(this.id, this.option)
    }
  }
}
</script>

创建用来存放模拟的chart数据：由于是创建柱状图和饼图，所以搭建了两个文件（commons公共目录下新建chart-options目录，创建options.js和options.js）:

// let $back = $('#myBack')
let Options = function () {
  this.pie = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: ''
    },
    tooltip: {
      headerFormat: '{series.name}<br>',
      pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true
        },
        showInLegend: true,
        events: {
          click: function (e) {
            // alert($back.val())
            // alert(e.point.url);
            // window.open(e.point.url);
            // location.href = e.point.url;
          }
        }
      }
    },
    series: [{
      name: '',
      colorByPoint: true,
      // 动态接收数据
      data: []
    }]
  }
}

Options.prototype.func = function (op) {
  if (op.pie != null) {
    // 复制对象
    this.pie = Object.assign(this.pie, op.pie)
  }
}

export default new Options()

let Options = function () {
  this.chart = {
    chart: {
      type: 'column'
    },
    title: {
      text: '全球各大城市人口排行'
    },
    subtitle: {
      text: 'Wikipedia'
    },
    xAxis: {
      type: 'category',
      labels: {
        rotation: -45
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
    },
    series: [{
      name: '',
      data: [],
      dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // :.1f 为保留 1 位小数
        y: 10
      }
    }]
  }
}

Options.prototype.funcc = function (op) {
  if (op.chart != null) {
    // 复制对象
    this.chart = Object.assign(this.chart, op.chart)
  }
}

export default new Options()

引用chart组件:

<template>
  <div class="pie">
    <div id="pie1">
      <x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
    </div>
    <div id="pie2">
      <x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
    </div>
  </div>
</template>

<script>
// 导入chart组件
import XChart from './chart.vue'
// 导入定义好的chart模型
import options from './chart-options/options'
import options1 from './chart-options/options1'
const axios = require('axios')

export default {
  data () {
    // let option = options.bar
    return {
      id1: 'pie1',
      option1: null,
      id2: 'pie2',
      option2: null
    }
  },
  components: { XChart },
  created () {
    this.chartPie1()
    this.chartPie2()
  },
  methods: {
    // 饼图1
    chartPie1 () {
      return new Promise((resolve, reject) => {
        options.func({
          pie: {
            title: {
              text: '浏览器访问量'
            },
            series: [{
              type: 'pie',
              name: '浏览器访问量占比',
              data: []
            }]
          }
        })
        axios.get('http://localhost:8181/findAll').then(({ data }) => {
          options.pie.series[0].data = data
        })
          .catch(error => {
            console.log(error)
          })
        this.option1 = options.pie
        resolve()
      }).then(resp => {
        // 执行创建饼图
        setTimeout(() => {
          this.$refs.XChart1.me()
        }, 500)
      })
    },
    chartPie2 () {
      return new Promise((resolve, reject) => {
        options1.funcc({
          chart: {
            title: {
              text: '人口 (百万)'
            },
            series: [{
              name: '总人口',
              data: [
                ['上海', 24.25],
                ['卡拉奇', 23.50],
                ['北京', 21.51],
                ['德里', 16.78],
                ['拉各斯', 16.06],
                ['天津', 15.20],
                ['伊斯坦布尔', 14.16],
                ['东京', 13.51],
                ['广州', 13.08],
                ['孟买', 12.44],
                ['莫斯科', 12.19],
                ['圣保罗', 12.03],
                ['深圳', 10.46],
                ['雅加达', 10.07],
                ['拉合尔', 10.05],
                ['首尔', 9.99],
                ['武汉', 9.78],
                ['金沙萨', 9.73],
                ['开罗', 9.27],
                ['墨西哥', 8.87]
              ]
            }]

          }
        })
        axios.get('http://localhost:8181/findAll').then(({ data }) => {
          let array = []
          let array1 = []
          data.filter(d => {
            array.push(d.name, d.y)
            array1.push(d.y)
          })
          options1.chart.series[0].data = data
        })
          .catch(error => {
            console.log(error)
          })
        this.option2 = options1.chart
        resolve()
      }).then(resp => {
        // 执行创建饼图
        setTimeout(() => {
          this.$refs.XChart2.me()
        }, 500)
        console.log('111' + resp)
      }).catch(resp => {
        console.log('2222' + resp)
      })
    }
  }

}
</script>

5、启动后台项目与前台项目进行测试

最终结果如下：
在这里插入图片描述

在这里插入图片描述
完成。

暮念朝兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringData-jpa+Vue+highcharts绘制静态数据柱状图、饼图

highcharts绘制静态数据柱状图、饼图：实现最基本的数据柱状图、饼图开发软件：后台开发：Idea；后台测试：Postman；前端开发：VScod；1、创建SpringBoot项目：使用Idead点击file，选择New Project，选择Spring InitInitializr，自行配置项目的基础配置；2、在pom.xml文件中导入依赖：<dependen...
复制链接

扫一扫