VUE+ECharts从数据库中获取数据(柱状图、扇形图),面试大厂应该注意哪些问题

99 阅读5分钟

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。

开源分享:docs.qq.com/doc/DSmRnRG…

1. 配置ECharts环境

==================================================================================

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图形库,提供直观,交互丰富,可高度个性化定制的数据可视化图表;ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图,并且支持图与图之间的混搭;

1.1 安装Echarts_VUE


导入一个即可

npm install echarts -g --save

npm install --save echarts

1.2 项目中引入Echarts


在main.js中导入

import echarts from 'echarts' //引入Echarts,

Vue.prototype.$echarts = echarts //定义为全局变量

2. 柱状图及动态交互

===============================================================================

  1. 引入官网代码画出柱状图;
  1. 通过数据库获取数据;
  1. 把数据展示到前台,实现动态交互;

2.1 后台实现


从数据库查出各个年龄段对应的总和,向前端传入一个数组

@CrossOrigin

@RequestMapping(value = "/findPatientAge", method = RequestMethod.GET)

public ActionResult findAllAgeP() {

//new一个结果集

ActionResult actionResult = new ActionResult();

//调用查询年龄段的方法

List allTOAgeService = patientService.findAllTOAgeService();

//返回响应值

actionResult.setStatusCode(200);

//定义List集合转化为纯数组

List ints = new ArrayList<>();

for (int i = 0; i < allTOAgeService.size(); i++) {

//获取年龄

ints.add(allTOAgeService.get(i).getDatay());

}

actionResult.setData(ints);

return actionResult;

}

在这里插入图片描述

2.2 Vue实现


  1. 在动态交互前必须要有静态数据,是通过索引赋值的,所有值不能为空(绘制静态图形);
  1. 在template中申请一个div块,放所绘制的图形;
  1. 需要加入watch监听

2.2.1 核心代码

created() {

this.$axios.get("findPatientAge").then((response) => {

console.log(response);

if (response.data.statusCode == 200) {

this.datay.length = 0; //清空数组

for (let i = 0; i < response.data.data.length; i++) {

this.datay.push(response.data.data[i]);

}

console.log(this.datay);

}

});

},

2.3 结果展示


初始化数据

动态交互

3. 扇形图及动态交互

===============================================================================

3.1 后台实现


因为扇形是一个key,value的形式所以需要两个值;

  1. 从数据库查出对应的值;
  1. 向前端传入一个对象

@CrossOrigin

@RequestMapping(value = "/findPatientSex", method = RequestMethod.GET)

public ActionResult findAllSexP() {

ActionResult actionResult = new ActionResult();

List allSexService = patientService.findAllSexService();

actionResult.setData(allSexService);

actionResult.setStatusCode(200);

return actionResult;

}

在这里插入图片描述

3.2 Vue实现


将传过来的对象加入数据源中,思路同柱状图

3.2.1 核心代码

created() {

this.$axios.get("findPatientSex").then((response) => {

console.log(response);

if (response.data.statusCode == 200) {

this.datas.length = 0; //清空数组

for (let i = 0; i < response.data.data.length; i++) {

this.datas.push(response.data.data[i]);

console.log(this.datas);

}

}

});

},