ajax异步加载获取数据与Echarts渲染图表的两种解决方案

ajax获取API接口数据，然后在Echarts中进行数据传递渲染，是最常见的方式，也是实现客户端轮询图表刷新的必用方式。在开发过程中，不同的需求对ajax的使用也有不同的方式。

引入外部JS包

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!--Echarts核心库-->
    <script type="text/javascript" charset="utf-8" src="js/echarts.min.js"></script>

HTML代码

<div class="container">
    <div class="weather-side">
        <div class="weather-gradient" id="main"></div>
    </div>
</div>

正常Echarts图表

    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

通过ajax获取数据实现图表的渲染

数据文件data.json

{
  "err": "0",
  "res": "OK",
  "data": [
    {
      "name": "Mon",
      "data": "120"
    },
    {
      "name": "Tue",
      "data": "200"
    },
    {
      "name": "Wed",
      "data": "150"
    },
    {
      "name": "Thu",
      "data": "80"
    },
    {
      "name": "Fri",
      "data": "80"
    },
    {
      "name": "Sat",
      "data": "110"
    },
    {
      "name": "Sun",
      "data": "130"
    }
  ]
}

1.封装函数，ajax内部调用;

应用场景

1. 适合相同图表的不同场合或多次调用，封装成公共函数，减少代码冗余；
2. 传递参数，按照不同的使用需求设置多个。比如：必须的data和X轴名称外，可以设置容器的id、柱图的颜色等等；

实践代码

    //获取JSON数据;
    $.getJSON("data/data.json", function (res) {
        var dataList = [], dataName = [];
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        //console.log(dataName);
        //渲染图表;
        getLine(dataName, dataList)
    })

    function getLine(dataName, dataList) {
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            xAxis: {
                type: 'category',
                data: dataName
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                data: dataList,
                type: 'bar',
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

2.Echarts内部调用ajax;

实践代码

 var myChart = echarts.init(document.getElementById("main"));
    var option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

    myChart.setOption(option);
    //获取JSON数据;
    $.getJSON("data/data.json", function (res) {
        var dataList = [], dataName = [];
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        //传递数据;
        myChart.setOption({
            xAxis: {
                data: dataName
            },
            series: [{
                data: dataList
            }]
        });
    })
    
    window.addEventListener("resize", function () {
        myChart.resize();
    });

其他说明

ajax异步加载返回值作用域的问题

    //获取JSON数据;
    var dataList = [], dataName = [];
    $.getJSON("data/data.json", function (res) {
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        console.log(dataName);//正常显示；
    })
    console.log(dataName);//显示为空，不能将ajax的数值传递至作用域外。

不推荐的同步加载方式

《ajax获取success返回值的解决方案》，https://blog.csdn.net/weixin_41290949/article/details/104281027

Done！