<template>
  <div class="crop-area">
      <div ref="areas" class="area"></div>
  </div>
</template>

<script>

export default {
  name: "echartsBar",
  props: {
    title: "高城镇",
    optionsType:{
      type: String,
      default:''
    }
  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      titles: "作物面积",
      data: ["高城镇", "殷店镇", "厉山镇", "草店镇", "淮河镇", "尚市镇"],
      dataValue: [205, 123, 212, 310, 217, 281],
      untils: "万亩",
    };
  },
  created() {
    
  },
  watch:{
    optionsType:{
      handler(newV) {
        // this.initRT()
      },
      deep: true,
    }
  },
  methods: {
    initRT() {
      let Chart = this.$refs.areas;
      let myChart = this.$echarts.init(Chart);
      let that = this;
      const option = {
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          // data: ['水稻', '玉米', '薯类', '其他'],
        },
        grid: {
          top: "10%",
          left: "10%",
          bottom: "10%",
        },
        color: ["#37ffeb"],
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            return `${params[0].name} :  ${params[0].value}${this.untils}`;
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        xAxis: {
          type: "category",
          data: this.data,
          axisLine: {
            lineStyle: {
              color: "#37ffeb",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#37ffeb",
            },
          },
          // axisLabel: {
          //   formatter: `{value} ${this.untils}`,
          // },
        },
        series: [
          {
            data: this.randomFun(this.dataValue),
            type: "bar",
            barMaxWidth: 25,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#02FEFF",
                  },
                  {
                    offset: 1,
                    color: "#334770",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    randomFun(data) {
      let arr = []
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        arr.push(Number(element * Math.random()))
      }
      return arr
    }
  },
};
</script>

<style lang="less" scoped>
.crop-area {
  margin-top: 0.10rem;
  width: 100%;
    height: 100%;
  .area {
    width: 100%;
    height: 100%;
  }
}
</style>
