<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: () => [1,2,4,6,8,4,5,2,2,1],
    },
  },
  data() {
    return { chart: null };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  watch: {
    chartLineYData(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: "6%", // 图表距容器左侧 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: [this.chartSettingData.seriesName],
          right: "3%",

          top: "3%",
          textStyle: {
            color: "white", // 设置 x 轴字体颜色为红色
          },
        },
        series: [
          {
            data:this.chartLineYData,
            name: this.chartSettingData.seriesName,
            type: "line",
            smooth: true,
            color: this.chartSettingData.lineColor, // 设置柱子颜色为红色
            areaStyle: { color: this.chartSettingData.areaColor },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>
    <style lang="scss" scoped></style>
    