关于javascript:echarts堆叠柱状图formatter

<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>