behaviortrend.vue

<template>
  <div>
    <div class="chart-header-box">
      <el-col :span="5" class="header-title">今日事件趋势</el-col>
      <div class="search-box">
          <!-- <span class="header-label">时间范围</span>
          <div class="header-select">
            <el-select v-model="illtype">
            <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="illtype" @change="getEventChange">
              <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in illageList"
              :key="item.value"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div id="illtrendchart" class="illtrendchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      illtype:'',
      illageList: [],
    };
  },
  methods: {
    initchart(data) {
      console.log(data)
      let xdata = [],charData = [];
      if(data.length > 0) {
        data.map(ele => {
          xdata.push(ele.hour)
          charData.push(ele.total_num)
        })
      }
      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: charData,
            itemStyle: {
              normal: {
                color: "#0069FF"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          }
        ]
      };
     maychart.setOption(option)
    },
    getEvents(){
      this.$api.show.getEventType().then(res => {
        this.illageList =  res.list_data
      })
    },
    getBehaviorHour(val){
      let data ={
        eventType:val
      }
      this.$api.show.getBehaviorHour(data).then(res => {
        this.initchart(res.list_data)
       })
    },
    getEventChange(val){
      this.getBehaviorHour(val)
    }
  },
  created(){
    this.getEvents()
  },
  mounted() {
    this.getBehaviorHour('')
  },
    
};
</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 6.5vw
  margin .2vh .5vw 0 .2vw
  float left
}
.search-box{
  float right 
}
</style>