<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';

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',
        },
      },
    },
  },
  valData: [
    { 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 },
  ],
});
</script>
<style lang="scss" scoped>
.land-use-charts {
  height: 90%;
}
</style>
