Echarts详解

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 方法就执行了，所以造成这样的无法获取到 数据的情况。