web_sh_audit/src/components/chart/BarChart.vue

<template>
  <div id="barChart" ref="barChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "barChart",
  data() {
    return {
      barChart: null,
    };
  },
  props: {
    categoryData: {
      type: Array,
      default() {
        return [];
      },
    },
    soilValueData: {
      type: Array,
      default() {
        return [];
      },
    },
    waterValueData: {
      type: Array,
      default() {
        return [];
      },
    },
    forestryValueData: {
      type: Array,
      default() {
        return [];
      },
    },
    sourceType: {
      type: String,
      default: "A",
    },
    unit: {
      type: String,
      default: "公顷",
    },
  },
  mounted() {
    this.initEchart(
      this.categoryData,
      this.soilValueData,
      this.waterValueData,
      this.forestryValueData
    );
  },
  watch: {
    sourceType(val) {
      // console.log(val, "sourceType");
      this.initEchart(
        this.categoryData,
        this.soilValueData,
        this.waterValueData,
        this.forestryValueData
      );
    },
  },
  methods: {
    initEchart(categoryData, soil, water, forestry) {
      if (!this.barChart) {
        this.barChart = echarts.init(this.$refs.barChart);
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
          formatter: function (params) {
            let relVal = params[0].name;
            for (let i = 0; i < params.length; i++) {
              if (params[i].value === 0) {
                relVal += `<br/>${params[i].marker}${params[i].seriesName}  ${params[i].value}`;
              } else {
                relVal += `<br/>${params[i].marker}${params[i].seriesName}  ${params[i].value}公顷`;
              }
            }
            return relVal;
          },
        },
        legend: {
          bottom: "0%",
          right: "-1%",
          orient: "vertical",
          textStyle: {
            color: "#FFF",
            fontSize: "14",
            fontFamily: "PingFang SC",
          },
        },
        grid: {
          top: "5%",
          left: "0",
          right: "19%",
          bottom: "-5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#FFF",
            },
          },
          // axisLine: "none",
          axisTick: "none",
          axisLabel: {
            //  inside:true,
          },
          type: "category",
          data: categoryData,
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        series: [
          {
            name: "土地",
            type: "bar",
            stack: "total",
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series",
            },
            data: soil,
            // itemStyle:{
            //   color:"#f00"
            // }
            // data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "水",
            type: "bar",
            stack: "total",
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series",
            },
            data: water,
            // itemStyle:{
            //   color:"#f00"
            // }
            // data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "林地",
            type: "bar",
            stack: "total",
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: "series",
            },
            data: forestry,
            // itemStyle:{
            //   color:"#f00"
            // }
            // data: [220, 182, 191, 234, 290, 330, 182],
          },
        ],
      };
      this.barChart.setOption(option);
    },
  },
};
</script>