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

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

const { proxy } = getCurrentInstance()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => {
      return {
        unit: '',
        list: []
      }
    }
  }
})
const emit = defineEmits();
let myChart = null
watch(() => props.data.list, () => {
  myChart.clear()
  init()
}, { deep: true })

const init = () => {
  let data = []
  let time = []
  if(props.data.list.length > 0) {
    props.data.list.forEach(item => {
      time.push(item.time)
      data.push(item.total)
    })
  }
  let options = {
    tooltip: {
      trigger: 'axis'
    },
    color: ['#6BBEAE', '#1890FF'],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: time,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#aaa'
        }
      },
      axisLabel: {
        color: '#aaa'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位:次',
        boundaryGap: [0, '100%'],
        axisLine: { // y轴
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: `订单数`,
        type: 'line',
        // stack: 'Total',
        data: data,
        barWidth: 20,
        tooltip: {
          valueFormatter: function(value) {
            return value + '次'
          }
        }
      }
    ]
  }
  myChart.setOption(options)
}

onMounted(() => {
  myChart = proxy.$echarts.init(document.getElementById('chart-worker-line' + props.id))
  init()
})
</script>

<style scoped>

</style>
