当前位置：首页 > news >正文

数据可视化:php+echarts实现数据可视化(包含echart安装引入)

news 来源：原创 2025/5/10 21:00:15

一、实现效果

实现动态时间，多列柱状图，单列柱状图，普通表格，表格动画等效果

二、实现

1、动态时间显示

通过php获取当前时间

设置计时器来动态显示时间秒数

<!-- 时间动画 -->
<script>// 动态更新时间中的秒数function updateTime() {const now = new Date();const hours = String(now.getHours()).padStart(2, '0');const minutes = String(now.getMinutes()).padStart(2, '0');const seconds = String(now.getSeconds()).padStart(2, '0');const formattedTime = `${hours}:${minutes}:${seconds}`;// 更新时间显示document.getElementById('current-time').textContent = formattedTime;}// 每秒更新一次时间setInterval(updateTime, 1000);// 页面加载时立即更新时间updateTime();
</script>

2、非图表数据获取

第一行的标题，第二行的第一列，第二列，第三行的第三列均使用普通数据

①主页面展示框架

例如，线别的获取，写入div框架，内部的内容由ajax获取

②ajax请求

请求数据同时设置刷新时间，保证数据的及时更新

function fetchData() {fetch('echarts/get_base_data.php').then(response => response.json()).then(data => {console.log(data);// 线别const lineTitle = document.querySelector('.line1_title');if (lineTitle && data.linebody && data.linebody.linebody) {lineTitle.textContent = data.linebody.linebody;}// 清空旧工单信息const wipContainer = document.querySelector('.line2_item1');if (wipContainer) {wipContainer.innerHTML = ''; // 清空之前的内容if (data.wip) {const wipHtml = `<div class="line2_1_block flex flex-between"><div class="line2_1_title">工单号</div><div class="line2_1_content">${data.wip.wip_entity_name || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">机种料号</div><div class="line2_1_content">${data.wip.item_no || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">机种名称</div><div class="line2_1_content">${data.wip.item_name || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">规格型号</div><div class="line2_1_content">${data.wip.item_desc || ''}</div>