<template>

  <el-card>
    <div slot="header">
      <DashboardTitle title="销售订单进度" icon="el-icon-shopping-cart-2" />
    </div>
    <el-scrollbar class="article">
      <v-chart
        class="chart"
        :autoresize="true"
        :option="option"
        :style="{height:'400px',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
  },
  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: ['CO111', 'CO222', 'CO333', 'CO444', 'CO555']
      },
      series: [
        {
          name: '已发货数量',
          type: 'bar',
          stack: 'total',
          color: '#67C23A',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [700, 456, 677, 300, 3222]
        },
        {
          name: '剩余发货数量',
          type: 'bar',
          stack: 'total',
          barWidth: 30,
          color: '#909399',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [1522, 2877, 3767, 5255, 3444]
        }
      ]
    })

    return { option }
  }
})
</script>

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