goldenPig/src/views/BioSafety/chart/CostHistogram.vue

<!--
 * @Author: your name
 * @Date: 2021-10-12 09:10:42
 * @LastEditTime: 2021-12-21 13:29:30
 * @LastEditors: Please set LastEditors
 * @Description: 成本分析的柱状图
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
-->
<template>
  <div class="cost-histogram">
    <div id="costHistogram"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    timeList: {
      type: Array,
      default: () => [],
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    ...mapState(["color"]),
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let options = {
        color: [this.color],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        grid: {
          left: "3%",
          right: "12%",
          bottom: "6%",
          containLabel: true,
        },
        xAxis: {
          name: "时间",
          type: "category",
          data: this.timeList,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          // axisPointer: {
          //   show: false,
          // },
          // axisTick: {
          //   alignWithLabel: true,
          // },
        },
        yAxis: {
          name: "人次",
          type: "value",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },

        series: [
          {
            name: "人次",
            type: "bar",
            barWidth: "15%",
            data: this.dataList,
            label: {
              show: true,
              verticalAlign: "bottom",
            },
          },
        ],
      };
      this.myChart.setOption(options, false);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("costHistogram"));
    this.init();
  },
  watch: {
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
    dataList: {
      handler() {
        this.myChart.clear();
        this.init();
      },
    },
    timeList: {
      handler() {
        this.myChart.clear();
        this.init();
      },
    },
  },
};
</script>
<style scoped>
.cost-histogram {
  display: inline-block;
  flex: 1;
  height: 100%;
}
#costHistogram {
  width: 100%;
  height: 100%;
}
</style>