highcharts绘制静态数据柱状图、饼图：
实现最基本的数据柱状图、饼图
开发软件：
- 后台开发：Idea；
- 后台测试：Postman；
- 前端开发：VScod；
1、创建SpringBoot项目：
使用Idead点击file，选择New Project，选择Spring InitInitializr，自行配置项目的基础配置；
2、在pom.xml文件中导入依赖：
3、在resource文件夹下编写application.yml配置文件：
4、创建dao,service,web,entity,config等基础包并启动项目：
这里启动是为了保证项目初始环境没有任何问题，如对自己的项目有充分信心可跳过启动项目，至此构建项目完成
5、编写实体类：
注：实体类中使用的@Data来自lombok插件，使用该注解后，可省略代码中的get/set方法，@Table声明该实体类与数据库中表名为@Table注解后name相对应。
如何安装lombok及lombok的使用
6、编写dao：
在这里使用了jpa,对于简单的CRUD语句及其方法会由实现jpa的ORM框架进行编写，我们对其直接进行调用即可：
什么是JpaRepository及其使用
7、编写service及其实现（可省略service接口编写）：
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 {
}
9、跨域实现：
由于该项目是前后端分离，不可避免的会产生跨域问题，下面是对跨域问题的解决
在config包下创建该配置文件，文件名可自行更改：
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文件：
- 创建用来存放模拟的chart数据：由于是创建柱状图和饼图，所以搭建了两个文件（commons公共目录下新建chart-options目录，创建options.js和options.js）:
- 引用chart组件: