<template>
  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
</template>
<script setup>
import { reactive } from 'vue';

const state = reactive({
  option: {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: (data) => {
        const params = data[0];
        let str = `<div class="custom-echarts-tips">
          <span>${params.name}</span><br/>
          <span>${params.marker} ${params.data} 万亩</span>
        </div>`;
        return str;
      },
    },
    barStyle: {
      barWidth: 15,
      itemStyle: {
        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
      },
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#35D0C0' },
          { offset: 1, color: '#35D0C0' },
        ],
        global: false,
      },
    },
    xAxis: {
      type: 'category',
      // name: '面积',
      // splitLine: {
      //   show: false,
      //   lineStyle: {
      //     type: 'dashed',
      //     color: '',
      //     width: 1,
      //   },
      // },
      axisTick: {
        show: false,
        alignWithLabel: false,
        interval: 'auto',
        inside: false,
        length: 5,
        lineStyle: {
          type: 'solid',
          width: 1,
          color: 'rgba(28, 158, 222, 1)',
        },
      },
      // axisLine: {
      //   show: true,
      //   lineStyle: {
      //     type: 'solid',
      //     width: 1,
      //     // color: '#000',
      //   },
      // },
      // axisLabel: {
      //   margin: 8,
      //   interval: 'auto',
      //   rotate: 0,
      //   fontSize: 10,
      //   color: '#fff',
      // },
    },
    yAxis: {
      type: 'value',
      // name: '面积(万亩)',
    },
    // label: {
    //   show: true,
    //   position: 'insideTop',
    //   distance: -10,
    //   formatter: () => {
    //     return `{z|}{a|}`;
    //   },
    //   rich: {
    //     a: {
    //       widht: 18,
    //       height: 18,
    //       backgroundColor: {
    //         image:
    //           'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKUSURBVHgBpVPPaxNBFH4zszubTTY2sSRSrFCC1dIepChoD9JgKwiem6s3vYl4lyb/QS/+wJPnBPQ/0LQ91KsHe5BaWo3Yupqk6WZ3Z3Z2xt2tKUUNHnww8OB775tv3nwP4D8DDQOqqoqh9iuPjlpeVkkxQurvBAoiREGlUcHbpUWcHaWkoGUivAWOPyUt5iiYgbABS/IkCTp5YxMAF1rTui36Rt70acipFmOEcqE8n+vaWZbf74jnl++KAQlOLlcKNZuA6X7JcPw9K2uSPOd68bY1NXtJL0zGeWiO5h3fsbxxk5abNRIrPlawVK8TmGtRx89ZJIVy93NzC9et0sMU6JMxzkF+XXc/1Fbab1+bmuq2RNcZ39jg9UojTBTkSx3spIu6oaHMLevC9E3r4tNBcxwU8NhCeurZg9y1GwRYJucX9e2lRYwi5TiW8nmEYe6FusIsfWfkyjIMiauZ0j2PozRJ92lxi2E1mAGcB8jwjoakQS1EZ4cRxBg1McUMkzNaFqEBgbeTTWYhlZChUs4wghCUw5gh43xnIv75mACBKkxkpKFbARiYtUNnbRhBW7hrUvicUCoK73flsQK7uSlZCgXI892X7uZjEU3992auwr1Xh++eEKr3fY8E9sx8YiiSyHlRhrFvPQT0NOyGP3puwDfO0XwuYseRf9mnoFtfOVx9tM6/fGShOPRhxy/ndsWbWvPI3rGRKtDAkWspQM8MkUpHtk6L0NIlOkAIpRhnro8Mo38Kep493guaUA3j5ydPiCpUAyrS3toMbEFcQke6ppWxteDAlszYV9L7zk9Bh4mWmzTXqlLB0Tr8uY3RTpQjWxcK09gx9hLcYm1l2/OyXF6VVVSViY0RKPhHHJGrpHTo2v8EGgI2uB3r9kQAAAAASUVORK5CYII=',
    //       },
    //     },
    //   },
    // },
  },
  data: [
    { value: 20, name: '耿马镇' },
    { value: 15, name: '勐撒镇' },
    { value: 12, name: '勐永镇' },
    { value: 16, name: '孟定镇' },
    { value: 8, name: '勐简乡' },
    { value: 12, name: '贺派乡' },
    { value: 10, name: '四排山乡' },
    { value: 9, name: '芒洪乡' },
    { value: 8, name: '大兴乡' },
  ],
});
</script>
