<template>
  <div :id="chartId" :style="{width: '100vw',height:`${chartSettings.height||'3rem'}` }"></div>
</template>
  
  <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  props: {
    chartId: { type: String, default: "pieChart" },
    chartSettings: { type: Object, default: () => {} },
    chartXData: {
      type: Array,
      default: () => [],
    },
    chartYData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return { chart: null };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  watch: {
    chartYData(val) {
      console.log(val, "val");
      if (val.length > 0) {
        this.draw();
      }
    },
  },
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      let option = {
        grid: {
          left: "10%", // 图表距容器左侧 10%的距离
          right: "10%",
          top: "13%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.chartXData,
          
          axisLabel: {
            textStyle: {
              color: "white", // 设置 x 轴字体颜色为红色
            },
            interval:this.chartSettings.interval||'auto',
            rotate:this.chartSettings.rotate||'0'
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "white", // 设置 x 轴字体颜色为红色
            },
          },
        },
        legend: {
          data: this.chartSettings.legendTextArr,
          left: "right",
          textStyle: {
            color: "white", // 设置 x 轴字体颜色为红色
          },
        },
        series: [
          {
            data: this.chartYData,
            type: "bar",
            barWidth:this.chartXData.length<10?20:5 ,
            name: this.chartSettings.legendTextArr[0],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color:this.chartSettings.barColor||'red', // 起始颜色为红色
                  },
                  {
                    offset: 1,
                    color: this.chartSettings.barColor||'red', // 结束颜色为绿色
                  },
                ],
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>
  <style lang="scss" scoped></style>
  