<template>
  <div class="plantArea" id="plnatArea"></div>
</template>

<script>
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
import { bar, autoHover } from '../echartsOption';
export default {
  data() {
    return {
      datalist: [],
    };
  },
  props: {
    baseId: Number,
  },
  watch: {
    baseId: {
      handler: async function (n) {
        if (n) {
          await this.$nextTick();
          const { rows } = await selectBatchInfo(this.baseId);
          this.datalist = [
            { name: '凤山镇', value: 35 },
            { name: '勐佑镇', value: 12 },
            { name: '三岔河镇', value: 30 },
            { name: '小湾镇', value: 4 },
            { name: '洛党镇', value: 9 },
            { name: '雪山镇', value: 12 },
            { name: '营盘镇', value: 32 },
            { name: '郭大寨乡', value: 13 },
            { name: '大寺乡', value: 35 },
            { name: '鲁史镇', value: 4 },
            { name: '诗礼乡', value: 9 },
            { name: '新华乡', value: 11 },
            { name: '腰街乡', value: 15 },
          ];
          let option = {
            tooltip: {
              trigger: 'axis',
              showContent: false,
              axisPointer: {
                type: 'shadow',
                crossStyle: {
                  color: '#999',
                },
              },
            },
            grid: {
              left: 30,
              top: 20,
              right: 20,
              bottom: 20,
            },
            xAxis: {
              type: 'category',
              // data: rows.map((item) => item.name),
              data: this.datalist.map((item) => item.name),
              axisLabel: {
                color: '#fff',
              },
              splitLine: {
                show: false, // 显示分割线
                lineStyle: {
                  type: 'dashed', // 设置为虚线
                  width: 0.5, // 分割线宽度
                },
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: '#fff',
              },
              splitLine: {
                show: false, // 显示分割线
                lineStyle: {
                  type: 'dashed', // 设置为虚线
                  width: 0.5, // 分割线宽度
                },
              },
            },
            series: [
              {
                // data: rows.map((item) => item.value),
                data: this.datalist.map((item) => item.value),
                type: 'bar',
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 12,
                    formatter: '{c}个',
                    position: 'top',
                    color: '#fff',
                    textBorderColor: 'transparent',
                  },
                },
                barWidth: 20,
                itemStyle: {
                  normal: {
                    borderRadius: [20, 20, 0, 0],
                    // color: (params) => {
                    //   return this.$colorList[params.dataIndex];
                    // },
                    color: {
                      type: 'linear', // 线性渐变
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        { offset: 0, color: '#b6fdf7' },
                        { offset: 1, color: '#019c8f' },
                      ],
                      global: false, // 默认为 false
                    },
                  },
                },
              },
            ],
          };
          let myChart = this.$echarts.init(document.getElementById('plnatArea'));
          myChart.setOption(option);
          autoHover(myChart, option, 1500);
        }
      },
      immediate: true,
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.plantArea {
  height: 100%;
  width: 100%;
}
</style>
