ECharts异步请求数据

ECharts是百度的一个用于数据可视化图表展示的一个开源工具。

ECharts官网：ECharts

一、异步请求官网实例1

1、引入jQuery.js、echarts.js（多种方式）

2、绘制图表
①为ECharts准备一个具备大小（宽高）的Dom

②基于准备好的dom，初始化echarts实例
③异步请求数据

方法A：

方法B：

先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。
data1.json文件格式如下：

{
    "name": [
        "衬衫",
        "羊毛衫",
        "雪纺衫",
        "裤子",
        "高跟鞋",
        "袜子"
    ],
    "value": [
        5,
        20,
        36,
        10,
        10,
        20
    ]
}

script：

两种方法的显示结果都如下：

异步请求数据实例1

二、异步请求数据实例2

data2.json的数据格式和data1.json不一样，要注意将数据转换成数组。

data.json文件：

{
    "success": true,
    "code": 100000,
    "recordsTotal": 5,
    "data": [
        {
            "beginTime": 1531756800000,
            "endTime": 1532188800000,
            "intervalDays": "0",
            "durationDays": "5",
            "time":"一月"
        },
        {
            "beginTime": 1535385600000,
            "endTime": 1535731200000,
            "intervalDays": "38",
            "durationDays": "4",
            "time":"二月"
        },
        {
            "beginTime": 1539100800000,
            "endTime": 1539446400000,
            "intervalDays": "40",
            "durationDays": "4",
            "time":"三月"
        },
        {
            "beginTime": 1541692800000,
            "endTime": 1542124800000,
            "intervalDays": "27",
            "durationDays": "5",
            "time":"四月"
        },
        {
            "beginTime": 1545235200000,
            "endTime": 1545580800000,
            "intervalDays": "37",
            "durationDays": "4",
            "time":"五月"
        }
    ]
}

script:

 // 一、将data2.json中data的月份转化成数组(将月份提取出来并放到一个新数组里)
        function convertMonthToArray(resule) {
            var data = resule.data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                // 1、获取data中的time属性
                console.log(data[i].time);
                // 2、将time属性放到一个新的数组里
                arr.push(data[i].time);
            }
            console.log(arr);
            // 3、返回arr数组
            return arr;
        }
 //二、将data2.json中间隔时间装换成数组
        function convertIntervalDaysToArray(resule) {
            var data = resule.data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                arr.push(data[i].intervalDays);
            }
            return arr;
        }
 // 三、异步请求数据
        $.get('http://localhost:9010/data2.json').done(function (resule) {
            // 获的X，函数方法要传参，不然无意义
            var xAxisMonth = convertMonthToArray(resule);
            // 获的Y
            var yAxisIntervalDays = convertIntervalDaysToArray(resule);
            myChart.setOption({
                xAxis: {
                    // 根据data2.json获取需要的值
                    data: xAxisMonth
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    // 根据data2.json获取需要的值
                    data: yAxisIntervalDays
                }]
            });
        })

显示结果：

异步请求数据实例2

注意：

• $.get('url')，url不能跨域
• 打开地址要使用本地服务器打开，如下（学习搭建本地服务器可以参考：使用python3创建本地局域网）：
  
  正确浏览方式.png
  
  
  错误浏览方式

学习笔记整理，如有错，望指出，共同进步