<template> <div class="wrap"> <div class="tool"> <div style="font-weight:bold"> 已查问到<span style="font-weight:bold" class="base-color">{{ total }}</span >条日志 </div> <div> <el-select v-model="time" placeholder="请输出工夫距离"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-button @click=" () => { showChart = !showChart; } " >{{ showChart ? "暗藏" : "展现" }}图表</el-button > </div> </div> <div v-show="showChart" id="main"></div> </div></template><script>import { mapGetters } from "vuex";export default { data() { return { showChart: true, chart: null, time: "", options: [ { label: "五分钟", value: "5" }, { label: "四分钟", value: "4" } ] }; }, props: { total: { type: Number, default: 0 }, reportSeries: { default() { return { date: [], abnormal: [], normal: [] }; } } }, computed: { ...mapGetters(["isOpenedSidebar"]) }, mounted() { this.chart = this.$echarts.init(document.getElementById("main")); window.onresize = () => { this.chart.resize(); }; }, watch: { isOpenedSidebar() { setTimeout(() => { this.chart.resize(); }, 300); }, reportSeries() { this.renderEcharts(); } }, destroyed() { window.onresize = null; }, methods: { renderEcharts() { const option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发无效 type: "shadow" // 默认为直线，可选为：'line' | 'shadow' } }, // calculable: true, xAxis: [ { type: "category", data: this.reportSeries.date, // 是否显示分隔线 splitLine: { show: true }, // 是否显示坐标轴轴线 axisLine: { show: false }, // 是否显示坐标轴刻度 axisTick: { show: false }, // 刻度标签款式 axisLabel: { show: true, color: "rgba(0, 0, 0, 0.65)" } } ], yAxis: [ { type: "value", // 刻度标签款式 axisLabel: { show: true, color: "rgba(0, 0, 0, 0.65)" }, // 是否显示分隔线 splitLine: { show: true }, // 是否显示坐标轴刻度 axisTick: { show: false }, // 是否显示坐标轴轴线 axisLine: { show: false }, splitNumber: 4, axisLabel: { formatter(value) { if (value > 1000) { value = parseInt(value) / 1000 + "k"; } return value; } } } ], series: [ { name: "异样", type: "bar", stack: "广告", data: this.reportSeries.abnormal, itemStyle: { color: "#F34871" } }, { name: "失常", type: "bar", barWidth: 20, stack: "广告", data: this.reportSeries.normal, itemStyle: { color: "#007AFF" } } ], grid: { x: 50, y: 25, x2: 30, y2: 35 } }; this.chart.setOption(option); } }};</script><style scoped lang="scss">.base-color { color: $theme-a-base;}.wrap { width: 100%; margin-bottom: 12px; #main { width: 100%; height: 210px; } .tool { height: 50px; width: 100%; display: flex; justify-content: space-between; align-items: center; .el-select { margin-right: 12px; } }}</style>