公司页面白色背景问题 data_div

本文解析了一个用户信息修改页面的HTML结构,详细介绍了如何通过HTML和Struts标签来实现用户名、真实姓名、身份证号码等字段的输入验证。
<table cellspacing="0" cellpadding="0" border="0" class="main_table_layout" id="table_body">
<tr>
<td valign="top"><table cellspacing="0" cellpadding="0" border="0" class="main_table_layout">
<tr class="menu_tr_height">
<td colspan="3" valign="middle">

<!-- 菜单栏 -->
<div class="menu_div">
<div class="menu_div_left"></div>
<div class="menu_div_right"></div>
<!-- 当前位置导航 -->
<div class="pos_div"> <span id="posinfo" class="pos_span">用户 >> 修改</span> </div>
</div></td>
</tr>

<tr>
<td class="list_border"></td>
<td valign="top">
[color=red][size=large]<div class="data_div" id="data_div" style="height: 550px">[/size][/color]
<table width="100%" cellspacing="0" cellpadding="0" class="data_table">
<tr>
<td width="120" class="data_td_left">用户名:</td>
<td class="data_td_right"><s:textfield name="whguser.username" id="username" validate="{required:true}"></s:textfield>
<font class="tip_input">*</font>
<div id="div_username" style="vertical-align:middle;"></div></td>
</tr>
<tr>
<td class="data_td_left"> 真实姓名:</td>
<td class="data_td_right"><s:textfield type="text" name="whguser.realname" id="realname" class="txt_150" validate="{required:true}"/>
<font class="tip_input">*</font>
<div id="div_sktime" style="vertical-align:middle;"></div></td>
</tr>
<tr>
<td class="data_td_left"> 身份证号码:</td>
<td class="data_td_right"><s:textfield type="text" name="whguser.idcard" id="idcard" class="txt_150" validate="{required:true,datatype:'idcard'}"/>
<font class="tip_input">*</font>
<div id="div_address" style="vertical-align:middle;"></div></td>
</tr>
<tr>
<td class="data_td_left"> 手机:</td>
<td class="data_td_right"><s:textfield type="text" name="whguser.mobile" id="mobile" class="txt_150" validate="{required:true}"/>
<font class="tip_input">*</font>
<div id="div_address" style="vertical-align:middle;"></div></td>
</tr>
<tr>
<td class="data_td_left"> 家庭住址:</td>
<td class="data_td_right"><s:textfield type="text" name="whguser.address" id="address" class="txt_150" validate="{required:true}"/>
<font class="tip_input">*</font>
<div id="div_address" style="vertical-align:middle;"></div></td>
</tr>

</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="40px;"><input type="button" class="buttonSty1" name="okBtn" id="okBtn" onClick="updateWhgUser()" value="确 定" />
  
<input type="button" name="cancelBtn" id="cancelBtn" class="buttonSty1" value="返 回" onClick="history.go(-1)" />
</td>
</tr>
</table>
</div></td>
<td class="list_border"></td>
</tr>
</table></td>
</tr>
</table>
为了满足你的需求——将**柱状图与折线图的背景改为白色**,我们需要修改 ECharts 图表的 `backgroundColor` 配置项,并调整文字、坐标轴等颜色以适配白色背景。 --- ### ✅ 修改说明: - 将图表容器的背景色设为白色:`body` 和 `#main` 的 CSS 背景色 - 设置 ECharts 图表的 `backgroundColor: '#ffffff'` - 调整所有文本颜色为深色(如 `#333`),确保在白底上可读 - 保留原有动态更新和数据展示功能 --- ### ✅ 完整 HTML 代码如下: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实时部门库存统计</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> <style> body { background-color: #ffffff; color: #333333; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; } h2 { text-align: center; color: #1a5276; text-shadow: 0 0 5px #ccc; } #main { width: 100%; height: 600px; margin-top: 30px; border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } </style> </head> <body> <h2>部门入库与出库数据监控</h2> <div id="main"></div> <script> // 获取容器 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, null, { backgroundColor: '#ffffff' }); // 部门名称 const departments = ['研发部', '生产部', '采购部', '仓储部', '销售部', '财务部']; // 初始数据生成函数 function generateData() { return departments.map(() => ({ outStock: Math.floor(Math.random() * 60) + 20, inStock: Math.floor(Math.random() * 40) + 10 })); } let currentData = generateData(); // 更新时间显示 function updateTime() { const now = new Date(); const timeStr = now.toLocaleTimeString(); document.querySelector('h2').textContent = `部门入库与出库数据监控 - 最后更新:${timeStr}`; } // 图表配置 var option; option = { tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.9)', borderColor: '#ddd', textStyle: { color: '#333' }, formatter: (params) => { const deptName = params[0].name; const outStock = params[0].value; const inStock = params[1] ? params[1].value : 0; const total = outStock + inStock; return `${deptName}<br/>已出库: ${outStock}<br/>未入库: ${inStock}<br/>合计: ${total}`; } }, legend: { data: ['已出库', '未入库'], top: 30, textStyle: { color: '#333' } }, grid: { left: '10%', right: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'category', data: departments, axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, axisTick: { alignWithLabel: true } }, yAxis: { type: 'value', name: '数量', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { lineStyle: { color: '#eee' } } }, series: [ { name: '已出库', type: 'bar', stack: '总量', barSize: '60%', itemStyle: { color: '#00aaff' }, label: { show: true, position: 'insideTop', color: '#fff', fontWeight: 'bold', fontSize: 12, formatter: (params) => params.value }, data: currentData.map(d => d.outStock) }, { name: '未入库', type: 'bar', stack: '总量', barGap: '0%', itemStyle: { color: 'rgba(0, 170, 255, 0.4)' }, label: { show: true, position: 'insideTop', color: '#fff', fontWeight: 'bold', fontSize: 12, formatter: (params) => params.value }, data: currentData.map(d => d.inStock) }, { name: '总数量趋势', type: 'line', symbol: 'circle', symbolSize: 8, itemStyle: { color: '#ff4081' }, lineStyle: { width: 3, color: '#ff4081' }, label: { show: true, position: 'top', color: '#ff4081', fontSize: 12, formatter: (params) => { return params.value; } }, data: currentData.map(d => d.outStock + d.inStock), smooth: true } ], emphasis: { focus: 'self' } }; // 设置初始选项 option && myChart.setOption(option); // 每5秒更新数据 setInterval(() => { currentData = generateData(); const totalData = currentData.map(d => d.outStock + d.inStock); myChart.setOption({ series: [ { data: currentData.map(d => d.outStock) }, { data: currentData.map(d => d.inStock) }, { data: totalData } ] }); updateTime(); }, 5000); </script> </body> </html> ``` --- ### ✅ 效果说明: | 特性 | 描述 | |------|------| | 🎨 白色背景 | 页面整体和图表都使用了白色背景,适合打印或嵌入正式报告 | | 📊 柱状图 + 折线图结合 | 每个部门有两个堆叠柱子表示“已出库”和“未入库”,并叠加一条折线表示总数趋势 | | 🔢 数值展示 | 每根柱子上方直接显示具体数值 | | 🔄 实时更新 | 每隔 5 秒模拟新数据并自动刷新图表 | | ✅ 科技感风格 | 使用蓝粉配色(#00aaff / #ff4081)保持现代感 | --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值