326 lines
8.0 KiB
Vue
326 lines
8.0 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-18 15:21:24
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-10-31 14:24:19
|
||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
|
||
* @Description: 附属设施异常统计
|
||
-->
|
||
|
||
<template>
|
||
<div class="content">
|
||
<div class="anomaly-select">
|
||
<el-select
|
||
:popper-append-to-body="false"
|
||
v-model="itemSelect"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in currentList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div ref="anomalyChart" class="anomaly-echart"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||
import { anomalyList } from "@/api/xj/screen/road-screen";
|
||
export default {
|
||
name: "AnomalyFacilities",
|
||
props: {
|
||
select: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 下拉框绑定
|
||
itemSelect: "",
|
||
// 下拉框数据
|
||
currentList: [],
|
||
// echart图数据
|
||
anomalyData: [],
|
||
// echart实例
|
||
chart: null,
|
||
};
|
||
},
|
||
watch: {
|
||
select: {
|
||
handler(val) {
|
||
if (val) {
|
||
this.itemSelect = "";
|
||
this.getCurrentList();
|
||
this.getChartData();
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
itemSelect: {
|
||
handler() {
|
||
this.getChartData();
|
||
},
|
||
},
|
||
},
|
||
created() {
|
||
this.getChartData();
|
||
},
|
||
methods: {
|
||
/* 获取右上角下拉框数据 */
|
||
getCurrentList() {
|
||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||
if (code === 200) {
|
||
this.currentList = data;
|
||
}
|
||
});
|
||
},
|
||
/* 获取柱状图数据 */
|
||
getChartData() {
|
||
const data = {
|
||
id: this.itemSelect,
|
||
type: this.select,
|
||
};
|
||
anomalyList(data).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.anomalyData = data;
|
||
this.$nextTick(() => {
|
||
this.drawChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/* 绘制echart */
|
||
drawChart() {
|
||
if (this.chart) {
|
||
this.chart.dispose();
|
||
}
|
||
const xData = this.anomalyData.map((item) => {
|
||
return item.label;
|
||
});
|
||
const yData = this.anomalyData.map((item, index) => {
|
||
if (index % 2 == 0) {
|
||
return {
|
||
...item,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: "linear",
|
||
global: false,
|
||
colorStops: [
|
||
{
|
||
//第一节下面
|
||
offset: 0,
|
||
color: "#033E43",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00FFEA",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
} else {
|
||
return {
|
||
...item,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: "linear",
|
||
global: false,
|
||
colorStops: [
|
||
{
|
||
//第一节下面
|
||
offset: 0,
|
||
color: "#034299",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#35F0FF",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
}
|
||
});
|
||
this.chart = echarts.init(this.$refs.anomalyChart);
|
||
this.chart.setOption({
|
||
// backgroundColor: "#041139",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#808C9F",
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "10%",
|
||
right: 0,
|
||
bottom: "20%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
data: xData,
|
||
axisLabel: {
|
||
color: "#808C9F",
|
||
fontSize: 12,
|
||
interval: 0,
|
||
},
|
||
axisLine: {
|
||
show: false, //不显示x轴
|
||
lineStyle: {
|
||
color: "rgba(53,65,95,1)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示刻度
|
||
},
|
||
boundaryGap: true,
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "数量",
|
||
nameTextStyle: {
|
||
color: "#C7DAF2",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false, //不显示x轴
|
||
lineStyle: {
|
||
color: "rgba(53,65,95,1)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#808C9F",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
// 柱体
|
||
{
|
||
name: "数量",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
borderColor: "#08B4A6",
|
||
borderWidth: 1,
|
||
},
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(105,160,231,0.1)",
|
||
},
|
||
label: {
|
||
show: false, //每条柱状图是否显示数字
|
||
formatter: "{c}",
|
||
position: "top",
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
data: yData,
|
||
},
|
||
],
|
||
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: 10,
|
||
// 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", () => {
|
||
this.chart.resize();
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.anomaly-select {
|
||
position: absolute;
|
||
z-index: 1;
|
||
right: 0;
|
||
top: 0.2rem;
|
||
|
||
}
|
||
|
||
.anomaly-echart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
|