内蒙项目首页修改

This commit is contained in:
2023-03-16 19:30:28 +08:00
parent f243616229
commit c349034caa
10 changed files with 555 additions and 173 deletions
+140 -38
View File
@@ -175,7 +175,7 @@
<div class="tab-wrap" style="right:5px;">
<div class="tab" data-value="6">
<div class="t-item active">按达因量</div>
<div class="t-item ">按焊口数</div>
<%-- <div class="t-item ">按焊口数</div>--%>
</div>
</div>
<div class="bw-item-content">
@@ -189,11 +189,11 @@
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="tab-wrap" style="right:5px;">
<div class="tab" data-value="5">
<%--<div class="tab" data-value="5">
<div class="t-item active">按分包商</div>
<div class="t-item ">按单位工程</div>
<div class="t-item">按材质类别</div>
</div>
</div>--%>
</div>
<div class="bw-item-content">
<div id='five' style="width: 100%; height: 100%;"></div>
@@ -210,8 +210,8 @@
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="4">
<div class="t-item active">按单位工程</div>
<div class="t-item ">按分包商</div>
<%-- <div class="t-item active">按单位工程</div>--%>
<div class="t-item active">按分包商</div>
</div>
</div>
<div class="bw-item-content pd10">
@@ -226,7 +226,7 @@
<div class="tab-wrap">
<div class="tab" data-value="3">
<div class="t-item active">按单位工程</div>
<div class="t-item ">按分包商</div>
<%-- <div class="t-item ">按分包商</div>--%>
</div>
</div>
<div class="bw-item-content pd10">
@@ -387,6 +387,128 @@
category_two('two', data21);
</script>
<script type="text/javascript">
function initEchart04(id, dataT, data1, title) {
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
// left:'center',
text: title,
textStyle: {
fontSize: 12,
color: '#fff',
fontWeight: '300'
},
show: true
},
color: ['#1ab1ff', '#f24166'],
grid: {
top: '20%',
left: '3%',
right: '3%',
bottom: '5%',
containLabel: true
},
tooltip: {
trigger: 'axis',
showDelay: 0,
axisPointer: {
type: 'shadow'
}
},
legend: {
// y: '55%',
top: '4%',
left: 'center',
textStyle: {
fontSize: 12,//字体大小
color: ['#1ab1ff', '#f24166']//字体颜色
},
data: ['全部'],
itemWidth: 12,//图例的宽度
itemHeight: 6,//图例的高度
},
xAxis: {
data: dataT,
boundaryGap: true,
axisLabel: {
color: '#1ab1ff',
interval: 0,
},
axisTick: {
show: false,
},
axisLine: {
onZero: true,
lineStyle: {
color: '#1ab1ff',
width: 1,
}
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: '#1ab1ff',
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#0D3C65',
},
},
splitNumber: 5,
},
series: [
{
name: '全部',
type: 'bar',
barWidth: 16,
data: data1,
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
itemStyle: {
color: '#1ab1ff',
emphasis: {
barBorderRadius: [10, 10, 0, 0],
},
normal: {
barBorderRadius: [10, 10, 0, 0],
}
}
}
]
};
myChart.clear();//清空
if (dataT.length > 6) {
option.dataZoom = [{
type: 'slider',
show: true,
startValue: 0,
endValue: 5,
height: '3',
backgroundColor: 'rgba(47,69,84,0)',
fillerColor: 'rgba(47,69,84,0)',
bottom: '0%',
zoomLock: true,
moveOnMouseWheel: true,
brushSelect: true,
showDetail: false,
}]
}
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function category_Three(id, xArr, series, title) {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
@@ -493,8 +615,8 @@
},
itemStyle: { normal: { color: 'rgba(236,157,27, 1)' } }
} ];
category_Three('three', xArr31, series31, '焊接进度分析(万)')
category_Three('three', xArr31, series31, '焊接进度分析(万)')
// initEchart04('three', xArr31, data310, '焊接进度分析(万)')
var xArr41 = [<%=xArr41%>];
var data41=[<%=data41%>];
var series41 = [{
@@ -524,8 +646,8 @@
data: data42,
itemStyle: { normal: { color: 'rgba(57,178,210, 1)' } }
}];
category_Three('four', xArr41, series41, '焊接一次合格率')
category_Three('four', xArr41, series41, '焊接一次合格率')
// initEchart04('four', xArr41, data41, '焊接一次合格率')
</script>
<script type="text/javascript">
function category_five(id, xArr, data) {
@@ -549,18 +671,12 @@
legend: {
show: false,
left: 'center',
data: ['降水量', '蒸发量']
data: ['问题数量']
},
radar: [
{
shape: 'circle',
indicator: (function () {
var res = [];
for (var i = 1; i <= 12; i++) {
res.push({ text: '问题' + i , max: 100 });
}
return res;
})(),
indicator: xArr,
center: ['50%', '55%'],
radius: 70
}
@@ -571,13 +687,9 @@
//areaStyle: {},
data: [
{
name: '降水量',
value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: '蒸发量',
value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
}
name: '问题数量',
value: data,
}
]
}
]
@@ -587,19 +699,9 @@
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var xArr = ["类别1", "类别2", "类别3", "类别4", "类别5", "类别6", "类别7"]
var data = [ {
name: '',
type: 'line',
data: [23, 25, 22, 13, 4, 12, 9],
itemStyle: { normal: { color: 'rgba(110,164,133, 1)' } }
}, {
name: '',
type: 'bar',
barWidth: 40,
data: [20, 2, 1, 34, 39, 30, 20],
itemStyle: { normal: { color: 'rgba(160,181,204, 1)' } }
}]
var xArr = [{ text: "气孔", max: 30 }, { text: "夹渣", max: 30 }, { text: "咬边", max: 30 }, { text: "未融", max: 30 }, { text: "其他", max: 30 }]
var data = [23, 25, 22, 13, 4]
category_five('five', xArr, data)
</script>
<script type="text/javascript">