首页将php获取到的数据通过echarts制作柱状图

将php获取到的数据通过echarts制作柱状图

时间: 2024-05-14 09:16:28 浏览: 105

php生成柱状图

如何生成一个php柱状图代码,php柱状图的生成一直是一个比较头痛的问题，现在我终于找到如何生成一个柱状图的方法希望供大家参看

要将 PHP 获取到的数据通过 echarts 制作柱状图，需要以下步骤： 1. 在 HTML 页面中引入 echarts 的库文件和一个容器 div，用来放置图表： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> </body> </html> ``` 2. 在 PHP 文件中获取数据，存储到数组中： ```php <?php // 连接数据库，获取数据 $conn = mysqli_connect('localhost', 'root', 'password', 'database'); $sql = 'SELECT * FROM data'; $result = mysqli_query($conn, $sql); // 存储数据到数组中 $data = array(); while ($row = mysqli_fetch_assoc($result)) { $data[] = $row; } // 将数组转化为 JSON 格式 $data_json = json_encode($data); ?> ``` 3. 在 HTML 页面中使用 JavaScript 将数据传递给 echarts，并绘制柱状图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 获取 PHP 中存储的数据 var data = <?php echo $data_json; ?>; // 将数据转化为 echarts 中要求的格式 var xData = []; var yData = []; for (var i = 0; i < data.length; i++) { xData.push(data[i].name); yData.push(data[i].value); } // 使用 echarts 绘制柱状图 var myChart = echarts.init(document.getElementById('chart')); var option = { xAxis: { data: xData, }, yAxis: {}, series: [{ type: 'bar', data: yData, }] }; myChart.setOption(option); </script> </body> </html> ``` 以上就是通过 PHP 和 echarts 制作柱状图的完整代码。

阅读全文