<template>
  <vab-chart
    style="width: 100%; height: 450px"
    :autoresize="true"
    :options="options"
    theme="vab-echarts-theme"
  />
</template>
<script>
  import VabChart from "@/extra/vabCharts";
  export default {
    components: { VabChart },
    props: {
      goodsName: {
        type: Array,
        default: () => {
          return [];
        },
      },
      goodsNum: {
        type: Array,
        default: () => {
          return [];
        },
      },
      goodsMoney: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {};
    },
    computed: {
      options() {
        return {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          color: ["#3ba272", "#fac858"],
          legend: {
            data: ["商品金额", "商品数"],
          },
          xAxis: [
            {
              type: "category",
              data: this.goodsName,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "商品金额",
              axisLabel: {
                formatter: "{value} 元",
              },
            },
            {
              type: "value",
              name: "商品数",

              axisLabel: {
                formatter: "{value} 个",
              },
            },
          ],
          series: [
            {
              name: "商品金额",
              type: "bar",
              barWidth: 50,
              data: this.goodsMoney,
            },
            {
              name: "商品数",
              type: "line",
              yAxisIndex: 1,
              smooth: true,
              data: this.goodsNum,
            },
          ],
        };
      },
    },
  };
</script>
<style></style>
