在RuoYi PHP框架中进行数据可视化,你可以使用一些流行的JavaScript库,如ECharts、Highcharts或者Chart.js。这些库可以帮助你轻松地创建各种图表和图形。以下是一个使用ECharts进行数据可视化的简单示例:
public/index.html
文件中添加以下代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RuoYi PHP Data Visualization</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
DataVisualizationController
的控制器,并在其中添加一个名为index
的方法:<?php namespace app\controller; use think\Controller; class DataVisualizationController extends Controller { public function index() { return $this->fetch(); } }
route/web.php
文件中为新的控制器和方法添加路由规则:<?php use think\facade\Route; Route::get('data-visualization', 'DataVisualization/index');
现在,当你访问/data-visualization
URL时,你将看到一个使用ECharts创建的简单柱状图。你可以根据需要修改ECharts的配置项和数据,以创建不同类型的图表和图形。更多关于ECharts的信息和示例,请参考官方文档:https://echarts.apache.org/zh/index.html