Echarts请求不同格式的json数据处理

王小婷

发布于 2019-10-15 10:57:23

2.9K0

发布于 2019-10-15 10:57:23

文章被收录于专栏：编程微刊编程微刊编程微刊

在前面已经说到过关于Echarts请求json数据处理：

【前端统计图】echart折线图ajax请求json数据:

https://cloud.tencent.com/developer/article/1464486

今天写第二种json格式，后面遇到会继续补充：

先看一下json数据格式：

[
    {
        "doneNum": 130,
        "date": "2019-01"
    }, {
        "doneNum": 80,
        "date": "2019-02"
    }, {
        "doneNum": 90,
        "date": "2019-03"
    }, {
        "doneNum": 110,
        "date": "2019-04"
    }, {
        "doneNum": 60,
        "date": "2019-05"
    }, {
        "doneNum": 70,
        "date": "2019-06"
    }, {
        "doneNum": 120,
        "date": "2019-07"
    }, {
        "doneNum": 80,
        "date": "2019-08"
    }, {
        "doneNum": 83,
        "date": "2019-09"
    }, {
        "doneNum": 84,
        "date": "2019-10"
    }, {
        "doneNum": 105,
        "date": "2019-11"
    }, {
        "doneNum": 52,
        "date": "2019-12"
    }
]

对于后端传过来的这种类型的json数据，前端需要做一些处理。

步骤说明：

1：为x轴和y轴分别定义一个数组：类别数组（实际用来盛放X轴，y轴坐标值）

var names = [];    //类别数组（实际用来盛放X轴坐标值）    
var series = [];

2：在ajax请求成功之后，在success的方法里面对请求的json数据进行处理，首先要遍历一下data数据（请求成功时执行该函数内容，data即为服务器返回的json对象），对数据进行遍历并且挨个取出类别并填入上一步已经定义好的类别数组里面。

 $.each(data, function (index, item) {
                names.push(item.date);    //挨个取出类别并填入类别数组
                series.push(item.doneNum);
            });

3：进入到echarts的代码，找到x轴和y轴所在的位置，将第一步的类别数组替换：

xAxis: [{
type: 'category',
 data: names
}],

series: [{
name: '心率',
 type: 'line',
 data: series
}]

这种json数据的处理方式和以下写法是相类似的：Echarts饼状图交互数据：https://cloud.tencent.com/developer/article/1512737，可以参考一下：

下面是完整的demo代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折线图
             var names = [];    //类别数组（实际用来盛放X轴坐标值）    
             var series = [];
            $.ajax({
                url: "test.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    
             //请求成功时执行该函数内容，data即为服务器返回的json对象           
            $.each(data, function (index, item) {
                names.push(item.date);    //挨个取出类别并填入类别数组
                series.push(item.doneNum);
            });
            
            console.log(JSON.stringify(data))
            hrFun(data);

                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));
            function hrFun(data) {
                hrChart.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['心率值']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: names
                    }],
                    yAxis: [{ // 纵轴标尺固定
                        type: 'value',
                        scale: true,
                        name: '心率值',
                        max: 140,
                        min: 0,
                        splitNumber: 20,
                        boundaryGap: [0.2, 0.2]
                    }],
                    series: [{
                        name: '心率',
                        type: 'line',
                        data: series
                    }]
                }, true);
            }
        </script>
    </body>
</html>

效果如下所示：