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

<script>

export default {
  name: "echartsBar",
  props: {
    title: "随县",

  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      titles: "作物面积",
      data: ["2024/3/24", "2024/3/25", "2024/3/26", "2024/3/27", "2024/3/28"],
      dataValue: [105, 12, 12, 10, 1, 31],
      untils: "万亩",
    };
  },
  created() {
    // if (this.title == "新街镇") {
    //   this.titles = "耕地质量等级比例";

      // this.dataValue = [0.48, 6.85, 0.87, 53.79, 13.11, 24.9];
      // this.untils = "%";
      // this.data = ["2024/3/24", "2024/3/25", "2024/3/26", "2024/3/27", "2024/3/28"];
    // }
  },
  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: [
          // {
          //   name: '水稻',
          //   type: 'bar',
          //   barGap: 0,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [320, 332, 301, 334, 390],
          //   barMaxWidth: 20,
            // itemStyle: {
            //   normal: {
            //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       {
            //         offset: 0,
            //         color: "#02ffc2",
            //       },
            //       {
            //         offset: 1,
            //         color: "#47b4b5",
            //       },
            //     ]),
            //   },
            // },
          // },
          {
            name: '水稻',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: [98, 77, 201, 154, 190],
            itemStyle: {
              normal: {
                color: "#5C6BF6",
              },
            },
          },
          {
            name: '玉米',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: "#59BEF9",
              },
            },
            data: [220, 182, 301, 334, 290]
          },
          {
            name: '薯类',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: "#78FBDB",
              },
            },
            data: [320, 332, 191, 234,390]
          },
          {
            name: '其他',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: "#EFC740",
              },
            },
            data: [150, 232, 101, 99, 40]
          }
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

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