Echarts是apache基金管理制作图表的JavaScript库。
Echarts常用属性:
title:标题组件,包含主标题和副标题
legend: 图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
XAxis: 直角坐标系 grid 中的 x 轴
yAxis:直角坐标系 grid 中的 y 轴
tooltip: 提示框
series: 数据
下面是利用Echarts和axios展示图表的一段代码,这里对折线图和柱状图来进行展示。注意在使用Echarts的时候在vue3中要放在挂载onMounted钩子函数中,因为 只有页面渲染完成后才可以进行相关操作。展示的图表和后端代码省略。
var option={ title: { text: '学生成绩信息柱状图和折线图' }, tooltip: {}, legend: { }, xAxis: { type:"category", data: [] }, yAxis: {}, series: [ { type: 'bar', data: [] }, { type: 'line', data: [] } ] } var echart=echarts.init(document.getElementById("main")); request.get("/test3/load").then(response=>{ console.log(response.data) option.xAxis.data=response.data.x option.series[0].data=response.data.y option.series[1].data=response.data.y echart.setOption(option) })
题外话:在这里进行代码代码编写的时候,把echart.setOption(option)放在了request请求外面,一直获得不了后端传来的数据,经过长时间的思考,是因为axios的异步调用。在这里 对同步和异步进行简单的区别:
以同步方式发送请求:发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会一直处于等待过程中。
以异步方式发送请求:发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。
所以在执行的时候由于axios是异步,没等获取后端返回的数据,然后echart.setOption方法就执行了,所以造成这样的无法获取到 数据的情况。