前端校招二面，VUE+ECharts从数据库中获取数据，微信小程序前端开发

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’}”