illegaltrend.vue

<template>
  <div>
    <div class="chart-header-box">
      <el-col :span="5" class="header-title">违法事件趋势</el-col>
      <span class="header-label">违法</span>
      <div class="header-select">
        <el-select v-model="illtype" @change="getTrafficHour">
          <el-option
            v-for="item in illageList"
            :key="item.value"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>
      <span class="header-label">事件</span>
      <div class="header-select">
        <el-select v-model="eventtype" @change="getTrafficHour">
          <el-option
            v-for="item in eventList"
            :key="item.value"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>
      <span class="header-label">重点车辆</span>
      <div class="header-select">
        <el-select v-model="special_type" @change="getTrafficHour">
          <el-option value label="全部"></el-option>
          <el-option value="1" label="车辆运输车"></el-option>
          <el-option value="2" label="危险品运输车"></el-option>
          <el-option value="3" label="救护车"></el-option>
        </el-select>
      </div>
    </div>
    <div id="illtrendchart" class="illtrendchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      illtype: "",
      eventtype: "",
      special_type: "",
      options: [],
      illageList: [],
      eventList: []
    };
  },
  methods: {
    initchart(cdata) {
      let xData = [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24"
      ];
      let maychart = this.$echarts.init(
        document.getElementById("illtrendchart")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["违法", "事件", "重点车辆"],
          align: "right",
          bottom: 0,
          textStyle: {
            color: "#666"
          },
          itemGap: 30,
          itemWidth: 30,
          itemHeight: 10
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "10%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666666",
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 6,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#666",
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#E5E5E5",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "违法",
            type: "line",
            data: (function() {
              let d = [];
              cdata.illegal.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  } else {
                    d.push(0);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#0069FF"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          },
          {
            name: "事件",
            type: "line",
            data: (function() {
              let d = [];
              cdata.event_type.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  } else {
                    d.push(0);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#3BB7FF"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          },
          {
            name: "重点车辆",
            type: "line",
            data: (function() {
              let d = [];
              cdata.key_vehicle.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  } else {
                    d.push(0);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#87D14B"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          }
        ]
      };
      maychart.setOption(option);
    },
    getillageList() {
      this.illageList = JSON.parse(localStorage.getItem("违法类型"));
    },
    getTrafficHour() {
      let data = {
        illegal_type: this.illtype,
        event_type: this.eventtype,
        key_vehicle_type: this.special_type
      };
      this.$api.show.getTrafficHour(data).then(res => {
        this.initchart(res);
      });
    },

    getEvents() {
      this.$api.show.getEventType().then(res => {
        this.eventList = res.list_data;
      });
    }
  },
  created() {},
  mounted() {
    this.getillageList();
    this.getTrafficHour();
    this.getEvents();
  }
};
</script>

<style lang="stylus" scoped>
.chart-header-box {
  height: 3vh;
  overflow: hidden;
  font-size: 14px;
}

.header-title {
  line-height: 3vh;
}

.illtrendchart {
  height: 22vh;
  width: 30vw;
}

.header-label {
  font-size: 12px;
  line-height: 3vh;
  float: left;
}

.header-select {
  width: 4.5vw;
  margin: 0.2vh 0.5vw 0 0.2vw;
  float: left;
}
</style>