<template>
  <div class="land-area-charts">
    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const chartsData = reactive({
  option: {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    // color: ['#3685fe', '#41b879', '#fed500'],
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    legend: {
      right: '0', // 距离左侧10%的位置
      top: '0', // 垂直居中
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
    },
    xAxis: {
      type: 'category',
      name: ' ',
      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
    },
    yAxis: {
      type: 'value',
      name: '',
      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: [
      {
        name: '耿马镇',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
      },
      {
        name: '勐撒镇',
        type: 'line',
        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
      },
      {
        name: '勐永镇',
        type: 'line',
        data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
      },
      {
        name: '孟定镇',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
      },
      {
        name: '勐简乡',
        type: 'line',
        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
      },
      {
        name: '贺派乡',
        type: 'line',
        data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
      },
      {
        name: '四排山乡',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
      },
      {
        name: '芒洪乡',
        type: 'line',
        data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
      },
      {
        name: '大兴乡',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
      },
    ],
  },
});
</script>
<style lang="scss" scoped>
.land-area-charts {
  height: 100%;
}
</style>
