<template>
  <div class="land-use-charts">
    <custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
let seriesData = reactive([
  { value: 205.6 },
  { value: 308.7 },
  { value: 359.6 },
  { value: 452.6 },
  { value: 388.9 },
  { value: 508.7 },
  { value: 369.5 },
  { value: 610.8 },
  { value: 754.3 },
]);

const chartsData = reactive({
  option: {
    color: ['#3685fe', '#41b879', '#ffd500'],
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      name: '  ',
      //   data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#BAE7FF',
          width: 1,
          type: 'solid',
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#BAE7FF',
          width: 1,
          type: 'solid',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(186, 231, 255, 0.2)',
          type: 'dashed',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'white',
        },
      },
    },
    series: [
      {
        type: 'pictorialBar',
        barCategoryGap: '40%',
        barWidth: '100%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        data: seriesData,
        labelLine: { show: true },
        z: 10,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#000001', // 起始颜色
              },
              {
                offset: 1,
                color: '#0175b6', // 结束颜色
              },
            ],
            global: false, // 默认为 false
          },
        },
        label: {
          show: false,
          position: 'top',
          formatter: '{c}',
          color: 'white',
          fontSize: 14,
        },
      },
    ],
  },
  valData: seriesData,
});
</script>
<style lang="scss" scoped>
.land-use-charts {
  height: 90%;
}
</style>
