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 .2vh .5vw 0 .2vw
  float left
}

</style>