npm install echarts -g --save
npm install --save echarts
1.2 项目中引入Echarts
在main.js中导入
import echarts from ‘echarts’ //引入Echarts，
Vue.prototype.$echarts = echarts //定义为全局变量
2. 柱状图及动态交互
===============================================================================
- 引入官网代码画出柱状图；
- 通过数据库获取数据；
- 把数据展示到前台，实现动态交互；
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实现
- 在动态交互前必须要有静态数据，是通过索引赋值的，所有值不能为空（绘制静态图形）；
- 在template中申请一个div块，放所绘制的图形；
- 需要加入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);
}
});
},
class=“HelloWorld echart-box”
id=“myChart1”
:style=“{width: ‘1000px’, height: ‘500px’,background:‘#ffffff’}”
2.3 结果展示
3. 扇形图及动态交互
===============================================================================
3.1 后台实现
因为扇形是一个key,value的形式所以需要两个值；
- 从数据库查出对应的值；
- 向前端传入一个对象
@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’}”
