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

 一、实现效果

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

二、实现

1、动态时间显示

通过php获取当前时间

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

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 = `
                        

                            
工单号
                            
${data.wip.wip_entity_name || ''}
                        
                        

                            
机种料号
                            
${data.wip.item_no || ''}
                        
                        

                            
机种名称
                            
${data.wip.item_name || ''}
                        
                        

                            
规格型号
                            
${data.wip.item_desc || ''}