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">
           <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
        <span  class="header-label">事件</span>
        <div class="header-select">
          <el-select v-model="illtype">
           <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
        <span class="header-label">重点车辆</span>
        <div class="header-select">
          <el-select v-model="illtype">
           <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div id="illtrendchart" class="illtrendchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      illtype:'',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
    };
  },
  methods: {
    initchart() {
      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: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            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() {
              var d = [];
              for (let i = 0; i < 12; i++) {
                d.push(parseInt(Math.random() * (100 - 50 + 1) + 50, 10));
              }
              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() {
              var d = [];
              for (let i = 0; i < 12; i++) {
                d.push(parseInt(Math.random() * (90 - 40) + 40, 10));
              }
              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() {
              var d = [];
              for (let i = 0; i < 12; i++) {
                d.push(parseInt(Math.random() * (80 - 30 + 1) + 30, 10));
              }
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#87D14B"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          },
        ]
      };
     maychart.setOption(option)
    }
  },
  mounted() {
      this.initchart()
    },
    
};
</script>

<style lang="stylus" scoped>
.chart-header-box{
  height 3vh
  overflow hidden
  font-size 14px
}
.header-title {
  line-height 3vh
  font-weight 600
}
.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>