<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 10:16:30
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-20 10:36:54
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
 * @Description: 总览大屏-主要病害趋势
-->
<template>
  <div class="content">
    <div class="chart" ref="trendsChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { roadTrends } from "@/api/xj/screen/disease-screen";
export default {
  name: "DiseaseTrends",
  props: {
    // 传过来得公司id
    companyId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      // echart数据
      echartList: [],
      // chart对象
      chart: null,
    };
  },
  watch: {
    companyId: {
      handler() {
        this.geteEhartList();
      },
    },
  },
  mounted() {
    this.geteEhartList();
  },
  methods: {
    /* 获取折线图数据 */
    geteEhartList() {
      roadTrends({ companyId: this.companyId }).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.hulan;
      });
      const yData2 = this.echartList.map((item) => {
        return item.kengcao;
      });
      const yData3 = this.echartList.map((item) => {
        return item.sanluowu;
      });
      if (this.chart) {
        this.chart.dispose();
      }
      if (this.$refs.trendsChart) {
        this.chart = echarts.init(this.$refs.trendsChart);
        this.chart.setOption({
          //你的代码
          title: {
            text: "",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          legend: {
            top: "6%",
            icon: "roundRect",
            itemWidth: 15,
            itemHeight: 10,
            textStyle: {
              color: "#808C9F",
              fontSize: 10,
              fontFamily: "DouYu",
            },
          },
          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",
            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: {
            name: "数量:个",
            nameTextStyle: {
              color: "#C7DAF2",
              align: "left",
            },
            type: "value",
            axisTick: {
              show: false,
            },
            minInterval: 1,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#808C9F",
              fontSize: 14,
              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: "#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: yData3,
            },
          ],
          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:
                this.echartList.length > 6 ? this.echartList.length - 6 : 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: this.echartList.length,
              // 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%;
  overflow: hidden;

  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
