<template>
    <div
      :id="chartId"
      :style="{ width: '100%', height: chartSettingData.height }"
    ></div>
  </template>
      
      <script>
  import echartMixins from "@/utils/resizeMixins";
  export default {
    props: {
      chartId: { type: String, default: "pieChart" },
      chartSettingData: { type: Object, default: () => {} },
      chartLineXData: {
        type: Array,
        default: () => ["其他场所"],
      },
      chartLineYData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return { chart: null };
    },
    mixins: [echartMixins],
    mounted() {
      this.$nextTick(() => {
        this.draw();
      });
    },
    watch: {
      // 同时监听 X 轴和 Y 轴数据
      chartLineXData: {
        handler() {
          this.updateChart();
        }
      },
      chartLineYData: {
        handler() {
          this.updateChart();
        }
      }
    },
    methods: {
      updateChart() {
        if (Array.isArray(this.chartLineXData) && Array.isArray(this.chartLineYData)) {
          this.draw();
        }
      },
      draw() {
        this.chart = this.$echarts.init(document.getElementById(this.chartId));
        let option = {
          grid: {
            left: "10%", // 图表距容器左侧 10%的距离
            right: "10%",
            top: "20%",
            bottom: "30%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            data: this.chartLineXData || [],
            axisLabel: {
              textStyle: {
                color: "white", // 设置 x 轴字体颜色为红色
              },
            },
          },
          yAxis: {
            type: "value",
            show: this.chartSettingData.showYaxis,
            axisLabel: {
              textStyle: {
                color: "white", // 设置 x 轴字体颜色为红色
              },
            },
          },
          legend: {
            data: ['上行次数','下行次数','开关门次数','停梯次数','运行距离'],
            right: "3%",
            top: "3%",
            textStyle: {
              color: "white", // 设置 x 轴字体颜色为红色
            },
          },
          series:this.chartLineYData,
        };
        this.chart.setOption(option, true);
      },
    },
  };
  </script>
      <style lang="scss" scoped></style>
      