<template>

  <div>
    <span class="trend-title">询价笔数趋势</span>
    <v-chart
      class="chart"
      :autoresize="true"
      :option="option"
      :style="{height:'400px',width:'100%'}"
    />
  </div>
</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: 'category',
        data: ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          stack: 'total',
          color: '#409EFF',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [700, 456, 677, 300, 437, 700, 456, 677, 990, 654, 1000, 669]
        },
        {
          type: 'bar',
          stack: 'total',
          barWidth: 30,
          color: '#909399',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [300, 544, 323, 563, 563, 300, 323, 336, 10, 346, 0, 331]
        }
      ]
    })

    return { option }
  }
})
</script>

<style scoped>
.trend-title {
  font-size: 14px;
  font-weight: bold;
}
.chart {
  height: 500px;
}
</style>
