将php获取到的数据通过echarts制作柱状图
时间: 2024-05-05 09:20:41 浏览: 17
首先,你需要将获取到的数据转化为 echarts 所需的数据格式。假设你的数据是一个数组,每个元素包含一个 key 和一个 value,可以按照如下方式转换为 echarts 所需的数据格式:
```php
$data = [
['key' => 'A', 'value' => 10],
['key' => 'B', 'value' => 20],
['key' => 'C', 'value' => 30],
];
$echartsData = [
'xAxis' => ['data' => array_column($data, 'key')],
'yAxis' => [],
'series' => [
[
'name' => '数据',
'type' => 'bar',
'data' => array_column($data, 'value'),
],
],
];
```
上面的代码中,我们将原来的数组转化为了一个关联数组 `$echartsData`,其中 `'xAxis'` 对应 x 轴的数据,`'yAxis'` 对应 y 轴的数据,`'series'` 对应柱状图的数据系列。其中 `array_column($data, 'key')` 可以提取出数组中所有元素的 `'key'` 值,`array_column($data, 'value')` 可以提取出数组中所有元素的 `'value'` 值。
接下来,我们可以在前端页面中使用 echarts 绘制柱状图。假设你已经引入了 echarts 的库文件,可以按照如下代码进行绘制:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var echartsData = <?php echo json_encode($echartsData); ?>;
chart.setOption({
title: { text: '柱状图' },
xAxis: echartsData.xAxis,
yAxis: echartsData.yAxis,
series: echartsData.series,
});
</script>
```
上面的代码中,我们先在页面中创建了一个 div 容器,用于显示柱状图。然后在页面底部使用 js 代码初始化 echarts,将获取到的数据传入 `setOption` 函数中,绘制柱状图。其中 `json_encode` 函数可以将 php 的数组转化为 json 格式的字符串,便于在 js 中使用。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)