<template>
  <div :id="'chart-ratio' + id" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "ChartRatio"
}
</script>
<script setup>
import {onMounted, getCurrentInstance, watch, onBeforeUnmount} from "vue";

const { proxy } = getCurrentInstance()
const props = defineProps({
  id: {
    type: Number,
    default: () => 0
  },
  list: {
    type: Array,
    default: () => []
  }
})

let myChart = null;

const init = () => {
  let time = [];
  let data = [];
  if(props.list.length > 0) {
    props.list.forEach(item => {
      time.push(item.createDate);
      data.push(item.value);
    })
    let options = {
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: '20%',
        bottom: '25%',
        containLabel: true
      },
      dataZoom: [
        {
          type: 'inside',
          start: 60,
          end: 100,
          zoomLock: true,
        },
        {
          start: 0,
          end: 10,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
        }],
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: time,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#aaa",
          }
        },
        axisLabel: {
          color: '#aaa'
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '单位:吨',
          boundaryGap: [0, 0],
          axisLine: {       //y轴
            show: false
          },
          axisTick: {
            show: false,
          },
          splitLine:{
            show:false
          },
          axisLabel: {
            color: '#aaa'
          }
        },
      ],
      series: [
        {
          name: '料肉比',
          type: "line",
          smooth: true,
          data: data,
          itemStyle: {
            color: '#108ee9'
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ';
            }
          },
        },
      ]
    }
    myChart.setOption(options)
  }
}

onMounted(() => {
  myChart = proxy.$echarts.init(document.getElementById('chart-ratio' + props.id))
  init()
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

watch(() => props.list, () => {
  myChart.clear()
  init()
}, { deep: true })

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>

</style>
