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

 一、实现效果

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

二、实现

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>