|
|
@@ -506,7 +506,7 @@
|
|
|
<div class="all-title">
|
|
|
<span>桥梁缺损分析</span>
|
|
|
</div>
|
|
|
- <div class="tubiao" id="w_chart4"></div>
|
|
|
+ <div class="tubiao_1" id="w_chart4"></div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -3691,165 +3691,101 @@ export default {
|
|
|
xAxisData.push(json.name);
|
|
|
seriesData.push(json.number);
|
|
|
}
|
|
|
- let myChart = echarts.init(document.getElementById('w_chart2'))
|
|
|
- let option = {
|
|
|
- grid: {
|
|
|
- top: "7%",
|
|
|
- left: "8%",
|
|
|
- bottom: "20%",
|
|
|
- right: "1%"
|
|
|
- },
|
|
|
+ var myChart = echarts.init(document.getElementById("w_chart2"));
|
|
|
+ var option = {
|
|
|
tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- formatter: (params) => {
|
|
|
- let result = params[0].name + '<br/>'
|
|
|
- params.forEach(item => {
|
|
|
- result = item.name + ': ' + item.value + '座<br/>'
|
|
|
- })
|
|
|
- return result
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '14%',
|
|
|
+ top: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
+ type: 'category',
|
|
|
data: xAxisData,
|
|
|
axisLine: {
|
|
|
- show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
- color: '#67C9D2'
|
|
|
+ color: 'white'
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: true //隐藏X轴刻度
|
|
|
- },
|
|
|
axisLabel: {
|
|
|
- show: true,
|
|
|
textStyle: {
|
|
|
- color: "#fff" //X轴文字颜色
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- yAxis: [{
|
|
|
- type: "value",
|
|
|
- nameTextStyle: {
|
|
|
- color: "#ebf8ac"
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
axisLine: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
lineStyle: {
|
|
|
- color: '#67C9D2'
|
|
|
+ color: 'white'
|
|
|
}
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
+ splitLine: {
|
|
|
show: true,
|
|
|
- textStyle: {
|
|
|
- color: "#fff"
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.3)'
|
|
|
}
|
|
|
},
|
|
|
+ axisLabel: {}
|
|
|
},
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- // name: "同比",
|
|
|
- nameTextStyle: {
|
|
|
- color: "#ebf8ac"
|
|
|
- },
|
|
|
- position: "right",
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- formatter: "{value} %", //右侧Y轴文字显示
|
|
|
- textStyle: {
|
|
|
- color: "#ebf8ac"
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- gridIndex: 0,
|
|
|
- min: 50,
|
|
|
- max: 100,
|
|
|
- splitNumber: 8,
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '建设长度',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20%',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#05c2fc'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#8ad0e8'
|
|
|
+ }]),
|
|
|
+ barBorderRadius: 12,
|
|
|
+ },
|
|
|
},
|
|
|
- splitArea: {
|
|
|
- show: true,
|
|
|
- areaStyle: {
|
|
|
- color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
|
|
|
- }
|
|
|
- }
|
|
|
+ data: seriesData
|
|
|
}
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- type: "bar",
|
|
|
- barWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "#1282FA"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#4693EC"
|
|
|
- }
|
|
|
- ]),
|
|
|
- borderWidth: 2,
|
|
|
- borderColor: new echarts.graphic.LinearGradient(
|
|
|
- 0, 0, 0, 1,
|
|
|
- [{
|
|
|
- offset: 0,
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#93B4EC'
|
|
|
- },
|
|
|
- ]
|
|
|
- ),
|
|
|
- shadowColor: 'blue',
|
|
|
- shadowBlur: 12,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowOffsetY: 0,
|
|
|
- },
|
|
|
- data: seriesData
|
|
|
- }, ]
|
|
|
- }
|
|
|
- myChart.setOption(option)
|
|
|
- // 获取数据的总长度，用于循环
|
|
|
- let dataLength = option.series[0].data.length;
|
|
|
- // 设置一个计数器
|
|
|
- let currentIndex = -1;
|
|
|
- // 使用 setInterval 实现自动轮播
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ var app = {
|
|
|
+ currentIndex: -1,
|
|
|
+ };
|
|
|
setInterval(function() {
|
|
|
- // 显示 tooltip 自动轮播效果
|
|
|
- currentIndex = (currentIndex + 1) % dataLength;
|
|
|
+ var dataLen = option.series[0].data.length;
|
|
|
+ // 取消之前高亮的图形
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'downplay',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: app.currentIndex
|
|
|
+ });
|
|
|
+ app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|
|
+ // 高亮当前图形
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'highlight',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: app.currentIndex,
|
|
|
+ });
|
|
|
+ // 显示 tooltip
|
|
|
myChart.dispatchAction({
|
|
|
type: 'showTip',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: currentIndex
|
|
|
+ dataIndex: app.currentIndex
|
|
|
});
|
|
|
- }, 2000); // 每隔 2000 毫秒切换一次
|
|
|
+ }, 1000);
|
|
|
+ myChart.setOption(option,true);
|
|
|
})
|
|
|
},
|
|
|
getDeviceTypeCount() {
|
|
|
@@ -3891,29 +3827,134 @@ export default {
|
|
|
pieChart() {
|
|
|
bridgeViewSelectBridgeDefectAnalysis().then(res => {
|
|
|
let seriesData = [];
|
|
|
+ let num = 0;
|
|
|
for (const pieSeries of res.data) {
|
|
|
+ num+=pieSeries.number*1;
|
|
|
seriesData.push({
|
|
|
value: pieSeries.number,
|
|
|
name: pieSeries.name
|
|
|
});
|
|
|
}
|
|
|
- let myChart = echarts.init(document.getElementById('w_chart4'))
|
|
|
- let option = {
|
|
|
- color: ['#F7A025', '#3065E7', '#05F8FC', '#ae350d'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{b} : {c}㎡ ({d}%)"
|
|
|
+ var myChart = echarts.init(document.getElementById("w_chart4"));
|
|
|
+ var rich = {
|
|
|
+ white: {
|
|
|
+ color: "#ddd",
|
|
|
+ align: "center",
|
|
|
+ padding: [5, 0],
|
|
|
},
|
|
|
- calculable: true,
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- radius: [30, 60],
|
|
|
-
|
|
|
- roseType: 'area',
|
|
|
- data: seriesData
|
|
|
- }]
|
|
|
+ };
|
|
|
+ var placeHolderStyle = {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ color: "rgba(0, 0, 0, 0)",
|
|
|
+ borderColor: "rgba(0, 0, 0, 0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ var data = [];
|
|
|
+ var color = [
|
|
|
+ "#00cfff",
|
|
|
+ "#006ced",
|
|
|
+ "#7af0aa",
|
|
|
+ "#b5d34d",
|
|
|
+ "#de8e3f",
|
|
|
+ "#e565c5",
|
|
|
+ ];
|
|
|
+ for (var i = 0; i < seriesData.length; i++) {
|
|
|
+ data.push({
|
|
|
+ value: seriesData[i].value,
|
|
|
+ name: seriesData[i].name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 10,
|
|
|
+ shadowBlur: 20,
|
|
|
+ borderColor: color[i],
|
|
|
+ shadowColor: color[i],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ name: "",
|
|
|
+ itemStyle: placeHolderStyle,
|
|
|
+ });
|
|
|
}
|
|
|
- myChart.setOption(option)
|
|
|
+ var seriesObj = [{
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ clockWise: false,
|
|
|
+ radius: [65, 70],
|
|
|
+ hoverAnimation: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "outside",
|
|
|
+ color: "#ddd",
|
|
|
+ formatter: function(params) {
|
|
|
+ var percent = 0;
|
|
|
+ var total = 0;
|
|
|
+ for (var i = 0; i < seriesData.length; i++) {
|
|
|
+ total += seriesData[i].value;
|
|
|
+ }
|
|
|
+ if (params.name !== "") {
|
|
|
+ return params.name + "\n" + params.value;
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rich: rich,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 10,
|
|
|
+ length2: 20,
|
|
|
+ show: true,
|
|
|
+ color: "#00ffff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ }, ];
|
|
|
+ var option = {
|
|
|
+ title: [{
|
|
|
+ text: "总数",
|
|
|
+ x: "center",
|
|
|
+ top: "32%",
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFFFFF",
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: "100",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: num,
|
|
|
+ x: "center",
|
|
|
+ top: "45%",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: "26",
|
|
|
+ color: "#FFFFFF",
|
|
|
+ fontFamily: "DINAlternate-Bold, DINAlternate",
|
|
|
+ foontWeight: "600",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ series: seriesObj,
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option,true);
|
|
|
// 获取数据的总长度，用于循环
|
|
|
let dataLength = option.series[0].data.length;
|
|
|
// 设置一个计数器
|
|
|
@@ -5292,6 +5333,12 @@ div ::-webkit-scrollbar {
|
|
|
color: #fff;
|
|
|
padding: 0 0 0 20px;
|
|
|
}
|
|
|
+.tubiao_1 {
|
|
|
+ height: 180px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 0 0 20px;
|
|
|
+}
|
|
|
|
|
|
.bombj {
|
|
|
background: url("../../assets/images/qiaoliang/bombj.png") no-repeat left bottom;
|
