Question

我正在尝试使用shell显示网络数据信息，然后将其保存到数据库中。保存在数据库上可以很好地保存数据。然后，我现在尝试使用ajax从数据库中检索数据并将其显示在饼图上，我的脚本似乎没有提供输出。

我的HTML文件

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script src="js/jquery-2.1.4.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
$(function() {
    $.ajax({
        url: 'http://localhost/eyenet2/chart_data.php',
        type: 'GET',
        success: function(data) {
        chartData = data;
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            app.title = 'Popo';

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:['SSL','HTTP','FTP','UDP','ARP','TCPIP','SMTP','SDN']
                },
                series: [
                    {
                        name:'Sevices',
                        type:'pie',
                        radius: ['40%', '55%'],
                        dataFormat: 'json',
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                // shadowBlur:3,
                                // shadowOffsetX: 2,
                                // shadowOffsetY: 2,
                                // shadowColor: '#999',
                                // padding: [0, 7],
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    // abg: {
                                    //     backgroundColor: '#333',
                                    //     width: '100%',
                                    //     align: 'right',
                                    //     height: 22,
                                    //     borderRadius: [4, 4, 0, 0]
                                    // },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data: chartData
                    }
                ]
            };;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
    });
});
       </script>
   </body>
</html>

chart_data.php

<?php

$servername = "localhost";


$username = "root";


$password = "";


$dbName = "packets";


$conn = new mysqli($servername, $username, $password, $dbName);


if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}


$query = "SELECT * FROM fakedata";


$result = $conn->query($query);


$jsonArray = array();


if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $jsonArrayItem = array();
    $jsonArrayItem['value'] = $row['value'];
    $jsonArrayItem['name'] = $row['name'];
    array_push($jsonArray, $jsonArrayItem);
  }
}


$conn->close();

header('Content-type: application/json');
echo json_encode($jsonArray);
?>

我的数据库格式

|value|name|
|335  |SSA |
|335  |SSB |
|335  |SSC |
|335  |SSD |
|335  |SSE |
|335  |SSF |
|335  |SSG |
|335  |SSH |

输出应该是这样的：！https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut

感谢您的评论和帮助。非常感谢

我正在尝试从数据库中加载echarts数据。我尝试了此代码，但未显示任何内容。有什么我想念或做的事吗？

0 个答案: