<template>
  <el-card>
    <div slot="header">
      <DashboardTitle title="生产发料" icon="el-icon-thumb" />
    </div>
    <el-scrollbar class="article">
      <v-chart
        class="chart"
        :autoresize="true"
        :option="option"
        :style="{width:'100%'}"
      />
    </el-scrollbar>
  </el-card>

</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import DashboardTitle from './components/DashboardTitle.vue'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ref, defineComponent } from '@vue/composition-api'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default defineComponent({
  name: 'HelloWorld',
  components: {
    VChart,
    DashboardTitle
  },
  // provide: {
  //   [THEME_KEY]: 'dark'
  // },
  setup() {
    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'horizontal',
        left: 'center',
        data: ['已发数量', '待发数量']
      },
      grid: {
        left: '0',
        top: '40px',
        bottom: '0',
        right: '10px',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLine: { show: true }
      },
      yAxis: {
        axisTick: {
          show: false // 不显示网格线
        },
        type: 'category',
        data: ['LO111', 'LO112', 'LO113', 'LO114', 'LO115']
      },
      series: [
        {
          name: '已发数量',
          type: 'bar',
          stack: 'total',
          color: '#67C23A',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [444, 400, 77, 300, 222]
        },
        {
          name: '待发数量',
          type: 'bar',
          stack: 'total',
          barWidth: 30,
          color: '#909399',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [78, 34, 367, 366, 283]
        }
      ]
    })

    return { option }
  }
})
</script>

<style scoped>
.chart {
  height: 300px;
}
</style>
