293 lines
7.9 KiB
Vue
293 lines
7.9 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-11-18 09:13:34
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-11-18 09:13:42
|
||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\four-content.vue
|
||
* @Description: 巡检报告-日常监测报告-路况评定
|
||
-->
|
||
<template>
|
||
<div class="four-content">
|
||
<div class="title">
|
||
<span>路况评定</span>
|
||
</div>
|
||
<div class="traffic-chart" ref="trafficChart"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
// 接口
|
||
import { getRoadConditionLog } from "@/api/xj/index/index";
|
||
export default {
|
||
name: "FourContent",
|
||
data() {
|
||
return {};
|
||
},
|
||
created() {
|
||
this.getLogData();
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 获取echart数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getLogData() {
|
||
getRoadConditionLog().then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.trafficEchartData = data;
|
||
this.$nextTick(() => {
|
||
this.drawTrafficChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制柱状图
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
drawTrafficChart() {
|
||
if (this.$refs.trafficChart) {
|
||
const xData = this.trafficEchartData.map((item) => {
|
||
return item.name;
|
||
});
|
||
const y1Data = this.trafficEchartData.map((item) => {
|
||
return item.road;
|
||
});
|
||
const y2Data = this.trafficEchartData.map((item) => {
|
||
return item.event;
|
||
});
|
||
const y3Data = this.trafficEchartData.map((item) => {
|
||
return item.bridge;
|
||
});
|
||
const y4Data = this.trafficEchartData.map((item) => {
|
||
return item.green;
|
||
});
|
||
const chart = echarts.init(this.$refs.trafficChart);
|
||
chart.setOption({
|
||
color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
|
||
title: [
|
||
// 中心比例
|
||
{
|
||
text: "病害趋势",
|
||
x: "1%",
|
||
y: "1%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
show: true,
|
||
right: "3%",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
padding: [5, 10, 5, 10],
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "7%",
|
||
right: "4%",
|
||
bottom: "12%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
data: xData,
|
||
type: "category",
|
||
axisTick: {
|
||
show: false, //隐藏X轴刻度
|
||
},
|
||
axisLabel: { color: "#A2B0B8" },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#3C6579",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
boundaryGap: false,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
name: "",
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#9eaaba",
|
||
},
|
||
axisLine: { show: false },
|
||
splitLine: { show: true },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "路面病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#388BD8",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y1Data,
|
||
},
|
||
{
|
||
name: "交安病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#04DAD7",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y3Data,
|
||
},
|
||
{
|
||
name: "桥隧病害数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#F8A74E",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y4Data,
|
||
},
|
||
{
|
||
name: "绿化问题数",
|
||
type: "line",
|
||
showSymbol: false,
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#8448FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffffff",
|
||
},
|
||
]),
|
||
},
|
||
data: y2Data,
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: false,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgba(225,225,225,0.2)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#ccc",
|
||
// 设置边框颜色
|
||
borderColor: "rgba(225,225,225,0.2)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 6,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "80%",
|
||
// 设置滚动条高度
|
||
height: 5,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 10,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 0,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.four-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0.5rem;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 10%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 3rem;
|
||
background: url("~@/assets/index/div-title.png") no-repeat;
|
||
background-size: 5%;
|
||
background-position: 0 30%;
|
||
|
||
span {
|
||
font-family: "DouYu";
|
||
}
|
||
}
|
||
|
||
.traffic-chart {
|
||
width: 100%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
</style> |