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

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

引入外部JS包

HTML代码

正常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