<template>
  <vab-chart
    style="width: 100%; height: 450px"
    :autoresize="true"
    :options="option"
    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 {
        // option: {
        //   grid: {
        //     left: "0%",
        //     right: "0%",
        //     bottom: "0%",
        //     containLabel: true,
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       crossStyle: {
        //         color: "#999",
        //       },
        //     },
        //   },
        //   color: ["rgb(124,181,236)", "rgb(67,67,72)"],
        //   legend: {
        //     data: ["商品金额", "商品数"],
        //     borderColor: "#000",
        //   },
        //   xAxis: [
        //     {
        //       type: "category",
        //       data: this.goodsName,
        //     },
        //   ],
        //   yAxis: [
        //     {
        //       type: "value",
        //       splitLine: {
        //         show: false,
        //       },
        //     },
        //   ],
        //   series: [
        //     {
        //       name: "商品金额",
        //       type: "bar",
        //       data: this.goodsMoney,
        //     },
        //     {
        //       name: "商品数",
        //       type: "line",
        //       data: this.goodsNum,
        //       smooth: true,
        //       itemStyle: {
        //         normal: {
        //           lineStyle: {
        //             color: "rgb(67,67,72)",
        //           },
        //         },
        //       },
        //     },
        //   ],
        // },
      };
    },
    computed: {
      option() {
        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",
              smooth: true,
              yAxisIndex: 1,
              data: this.goodsNum,
            },
          ],
        };
      },
    },
  };
</script>
<style></style>
