<template>
  <div class="monthly-use-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: '2%',
      top: '18%',
      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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    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, 200, 300, 150],
      },
      {
        name: '肥料',
        type: 'line',
        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 600, 158, 320],
      },
      {
        name: '种源',
        type: 'line',
        data: [120, 516, 238, 453, 368, 519, 432, 128, 578, 120, 578, 324],
      },
      {
        name: '兽药',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 565, 134, 256],
      },
      {
        name: '农机',
        type: 'line',
        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 326, 456, 189],
      },
    ],
  },
});
</script>
<style lang="scss" scoped>
.monthly-use-charts {
  height: 100%;
}
</style>
