xjsaas-ui/src/views/big-screen/disease-components/disease-trends.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>