Web前端最全VUE+ECharts从数据库中获取数据（柱状图、扇形图），大厂面试题目

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

export default {

data() {

return {

// 定义图表，各种参数

msg: “柱状图”,

datay: [5, 10, 43, 54, 34, 32],

};

},

mounted: function () {

this.drawLine(); //按照默认值绘制图表

},

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

}

});

},

watch: {

datay: {

//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据

handler: function () {

this.drawLine();

},

deep: true,

},

},

methods: {

drawLine() {

// 1、基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById(“myChart1”));

//2、构造图表数据

let options = {

title: {

text: “年龄情况分析”,

left: “center”,

tooltip: {},

},

xAxis: {

data: [

“0~10”,

“10~20”,

“21~30”,

“31~40”,

“41~50”,

“51~60”,

“61~70”,

“71~80”,

“80以上”,

],

},

yAxis: {},

series: [

{

name: “年龄”,

data: this.datay,

type: “bar”,

},

],

};

// 3、绘制图表

myChart.setOption(options);

},

},

};

2.3 结果展示

---

3. 扇形图及动态交互

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

3.1 后台实现

---

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

1. 从数据库查出对应的值；

2. 向前端传入一个对象

@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);

}

}

});

},

class=“HelloWorld echart-box”

id=“myChart1”

:style=“{width: ‘1000px’, height: ‘500px’,background:‘#ffffff’}”

3.3 结果展示

---

4. 后端传Map集合

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

4.1 后台实现

---

后台如果传Map集合，到前台就是一个“二维数组”，拿数据的方式；

@CrossOrigin

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

public ActionResult findAllSexP() {

ActionResult actionResult = new ActionResult();

Map<String, Object> objectHashMap = new HashMap<>();

String[] name = {“男”, “女”, “未知”};

String[] data = {“164”, “32”, “18”};

objectHashMap.put(“name”, name);

objectHashMap.put(“data”, data);

actionResult.setData(objectHashMap);

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ng[] name = {“男”, “女”, “未知”};

String[] data = {“164”, “32”, “18”};

objectHashMap.put(“name”, name);

objectHashMap.put(“data”, data);

actionResult.setData(objectHashMap);

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】