<template>
  <div
    ref="barEcharts"
    :id="id"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>

<script>
// import resize from "./mixins/resize";
export default {
  // mixins: [resize],
  props: {
    type: {
      type: String,
      default: "",
    },
    legend: {
      type: Array,
      default() {
        return [];
      },
    },
    // title: {
    //   type: String,
    //   default: ''
    // },
    xAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    yAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    colorList: {
      type: Array,
      default() {
        return ["#88aefe", "#4983fb"];
      },
    },
  },
  data() {
    return {
      id: "barEcharts",
      chart: null,
    };
  },
  methods: {
    drawBar() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        title: {
          text: "黑飞数量地点分布",
        },
        grid: {
          top: 70,
          bottom: 70,
          left: 60,
          right: 30,
        },
        xAxis: [
          {
            type: "category",
            data: ["地点1", "地点2", "地点3", "地点4", "地点5"],
            axisLabel: {
              fontSize: 18,
              color: "#35445FCC",
            },
            // x轴最下面的线
            axisLine: {
              show: true, // X轴 网格线 颜色类型的修改
              lineStyle: {
                type: "dashed",
                color: "#35445FCC",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          //y轴名字
          axisLabel: {
            show: true,
            textStyle: {
              color: "#35445FCC",
              fontSize: 16,
            },
          },
          // x轴线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#606C8026",
            },
          },
          interval: 50, // 设置刻度间隔为 50
        },
        series: [
          {
            // name: this.legend[0],
            // data: this.yAxisData,
            data: [30, 90, 80, 130, 120],
            // showSymbol: false, //去掉折线上的小圆点
            type: "line",
            //设置折线颜色和粗细
            lineStyle: {
              width: 3,
              color: "#FFA741",
            },
            barWidth: 20,
            itemStyle: {
              color: "#FFA741",
            },
            symbolSize: 10, // 设置折线上的小圆点大小为 10px
          },
        ],
      });
    },
  },
  watch: {
    yAxisData() {
      // console.log(this.findingsData);
      // console.log(this.type);
      this.drawBar();
    },
  },
  mounted() {
    this.drawBar();
  },
};
</script>

<style></style>
