Json 数据图表

在我的 Web 应用程序中，我有一个图表和一个返回的 URL

[ { "category": "2019-01-06 21:22:56", "value1": 0.5 }, { 
"category": "2019-01-06 21:24:57", "value1": 0.5 }, { "category": 
"2019-01-08 22:09:52", "value1": 533 }, { "category": "2019-01-08 
22:10:45", "value1": -100 }, { "category": "2019-01-08 22:11:35", 
"value1": 216.5 }, { "category": "2019-01-08 22:12:25", "value1": 
-221.5 }, { "category": "2019-01-08 22:13:16", "value1": 226 } ]

现在我希望"类别"值显示在 x 轴上，"value1"值显示在 y 轴上。

图表代码如下：

var dataArr = [];
        $.get('https://myurl.com/backend/data.php', {}, 
function(response) {
            dataArr = JSON.parse(response);
            initEchart();
        });
var myChart = echarts.init(document.getElementById('main'));
function initEchart(){
            // specify chart configuration item and data
            var option = {
                title: {
                    text: 'ECharts entry example'
                },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: dataArr.category 
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'line',
                    data: dataArr.value1
                }]
            };
            // use configuration item and data specified to show 
chart
            myChart.setOption(option);
        }
}

你需要使用这样的东西

function(response) {
        dataArr = JSON.parse(response);
        initEchart();
        var category = [];
        var value = [];
        for(var i = 0; i < dataArr.length; i++) {
           var item = dataArr[i];   
           category.push("""+item[0]+""");
           value.push("""+item[1]+""");
       }
       category= '['+category+']';
       var result_category = category.toString();
       value= '['+value+']';
       var result_value = value.toString();

      //and in chart use like this 
       xAxis: {
                data:  JSON.parse(result_category)
            },
        series: [{
                    name: 'Sales',
                    type: 'line',
                    data: JSON.parse(result_value)
                }]
});

dataArr[0].category
dataArr[0].value1
dataArr[1].category
dataArr[1].value1

这就是 AJAX 调用中的数组的样子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- including ECharts file -->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src="echarts.js"></script>
</head>
<body>
    <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
    var dataArr = [];
            $.get('https://myurl.com/backend/data.php', {}, 
    function(response) {
                dataArr = JSON.parse(response);
                initEchart();
            });
    var myChart = echarts.init(document.getElementById('main'));
    function initEchart(){
                // specify chart configuration item and data
                var option = {
                    title: {
                        text: 'ECharts entry example'
                    },
                    tooltip: {},
                    legend: {
                        data:['Sales']
                    },
                    xAxis: {
                        type: 'category',
                        data: [dataArr[0].category, dataArr[1].category, dataArr[2].category, dataArr[3].category, dataArr[4].category, dataArr[5].category, dataArr[6].category]                        
                    },
                    yAxis: {},
                    series: [{
                        name: 'Sales',
                        type: 'line',
                        data: [dataArr[0].value1, dataArr[1].value1, dataArr[2].value1, dataArr[3].value1, dataArr[4].value1, dataArr[5].value1, dataArr[6].value1]                        
                    }]
                };
                myChart.setOption(option);
            }    
    </script>
</body>
</html>

相关内容

最新更新

热门标签：