<template>
  <vab-chart
    style="width: 100%; height: 280px"
    :autoresize="true"
    :options="options"
    theme="vab-echarts-theme"
  />
</template>
<script>
  import VabChart from "@/extra/vabCharts";
  import VabCount from "@/extra/vabCount";

  export default {
    components: {
      VabChart,
      // VabCount,
    },
    props: {
      timeData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      goodsNum: {
        type: Array,
        default: () => {
          return [];
        },
      },
      orderNum: {
        type: Array,
        default: () => {
          return [];
        },
      },
      orderMoney: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        timer: 0,
        countConfig: {
          startVal: 0,
          endVal: this.$baseLodash.random(20000, 60000),
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        //访问量
        options: {
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          color: ["#0668F0", "#F7B500", "#B620E0"],
          legend: {
            data: ["金额", "商品数量", "订单数量"],
            borderColor: "#000",
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: this.timeData,
              axisTick: {
                alignWithLabel: true,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "金额",
              type: "line",
              data: this.orderMoney,
              smooth: true,
              areaStyle: {
                // normal: {
                //   color: "#0668F0",
                // },
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgb(198,199,248)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#fff", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                },
              },
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#0668F0",
                    // opacity: 0.5,
                    // width: 2,
                  },
                },
              },
            },
            {
              name: "商品数量",
              type: "line",
              data: this.goodsNum,
              smooth: true,
              areaStyle: {
                // normal: {
                //   color: "#F7B500",
                // },
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(255,242,209)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#F7B500",
                  },
                },
              },
            },
            {
              name: "订单数量",
              type: "line",
              data: this.orderNum,
              smooth: true,
              areaStyle: {
                // normal: {
                //   color: "#B620E0",
                // },
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(241,211,249)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#B620E0",
                  },
                },
              },
            },
          ],
        },
      };
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
  };
</script>
