348 lines
9.5 KiB
Vue
348 lines
9.5 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-18 10:16:30
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-10-24 17:09:27
|
||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
|
||
* @Description: 病害巡检-病害趋势
|
||
-->
|
||
<template>
|
||
<div class="content" ref="trendsChart"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { roadTrends } from "@/api/xj/screen/disease-screen";
|
||
export default {
|
||
name: "DiseaseTrends",
|
||
data() {
|
||
return {
|
||
// echart数据
|
||
echartList: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.geteEhartList();
|
||
},
|
||
methods: {
|
||
/* 获取折线图数据 */
|
||
geteEhartList() {
|
||
roadTrends().then(({ data, code }) => {
|
||
if (code === 200) {
|
||
this.echartList = data;
|
||
this.$nextTick(() => {
|
||
this.drawChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/* 绘制折线图 */
|
||
drawChart() {
|
||
const xData = this.echartList.map((item) => {
|
||
return item.date;
|
||
});
|
||
const yData1 = this.echartList.map((item) => {
|
||
return item.A1000;
|
||
});
|
||
const yData2 = this.echartList.map((item) => {
|
||
return item.A2001;
|
||
});
|
||
const yData3 = this.echartList.map((item) => {
|
||
return item.A2000;
|
||
});
|
||
const yData4 = this.echartList.map((item) => {
|
||
return item.A0;
|
||
});
|
||
const yData5 = this.echartList.map((item) => {
|
||
return item.A1;
|
||
});
|
||
const chart = echarts.init(this.$refs.trendsChart);
|
||
chart.setOption({
|
||
//你的代码
|
||
title: {
|
||
text: "",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
legend: {
|
||
top: "top",
|
||
icon: "roundRect",
|
||
itemWidth: 15,
|
||
itemHeight: 10,
|
||
textStyle: {
|
||
color: "#808C9F",
|
||
},
|
||
},
|
||
grid: {
|
||
top: "25%",
|
||
left: "0%",
|
||
right: "10%",
|
||
bottom: "10%",
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "line",
|
||
},
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#808C9F",
|
||
},
|
||
confine: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(60,132,163,0.4)", // x轴线颜色
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, // 是否显示x轴的刻度
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#808C9F",
|
||
fontSize: 12,
|
||
},
|
||
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#808C9F",
|
||
fontSize: 12,
|
||
formatter: function (value) {
|
||
return value + "";
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(60,132,163,0.2)",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "坑槽",
|
||
type: "line",
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#FFC100",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(98,74,0,0)",
|
||
},
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#FFC100",
|
||
},
|
||
// 设置节点样式
|
||
showSymbol: false,
|
||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||
symbolSize: 10, // 节点大小
|
||
itemStyle: {
|
||
color: "#FFC100", // 节点颜色
|
||
},
|
||
data: yData1,
|
||
},
|
||
{
|
||
name: "块状修补(沥青)",
|
||
type: "line",
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#08B4A6",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(8,180,166,0)",
|
||
},
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#08B4A6",
|
||
},
|
||
// 设置节点样式
|
||
showSymbol: false,
|
||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||
symbolSize: 10, // 节点大小
|
||
itemStyle: {
|
||
color: "#08B4A6",
|
||
},
|
||
data: yData2,
|
||
},
|
||
{
|
||
name: "条状修补(沥青)",
|
||
type: "line",
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#146fd7",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(20, 111, 215,0)",
|
||
},
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#146fd7",
|
||
},
|
||
// 设置节点样式
|
||
showSymbol: false,
|
||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||
symbolSize: 10, // 节点大小
|
||
itemStyle: {
|
||
color: "#146fd7",
|
||
},
|
||
data: yData3,
|
||
},
|
||
{
|
||
name: "横向裂缝",
|
||
type: "line",
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#994EFF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(153,78,255,0)",
|
||
},
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#994EFF",
|
||
},
|
||
// 设置节点样式
|
||
showSymbol: false,
|
||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||
symbolSize: 10, // 节点大小
|
||
itemStyle: {
|
||
color: "#994EFF",
|
||
},
|
||
data: yData4,
|
||
},
|
||
{
|
||
name: "纵向裂缝",
|
||
type: "line",
|
||
smooth: true,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#994EFF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(153,78,255,0)",
|
||
},
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#994EFF",
|
||
},
|
||
// 设置节点样式
|
||
showSymbol: false,
|
||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||
symbolSize: 10, // 节点大小
|
||
itemStyle: {
|
||
color: "#994EFF",
|
||
},
|
||
data: yData5,
|
||
},
|
||
],
|
||
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>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
|