<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: {
      goodsValue: {
        type: Array,
        default: () => {
          return [];
        },
      },
      goodsName2: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        // options: {
        //   tooltip: {
        //     trigger: "item",
        //   },
        //   legend: {
        //     orient: "vertical",
        //     left: "left",
        //     data: this.goodsName2,
        //   },
        //   series: [
        //     {
        //       name: "商品销售",
        //       type: "pie",
        //       radius: "55%",
        //       center: ["50%", "60%"],
        //       data: this.goodsValue,
        //       emphasis: {
        //         itemStyle: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: "rgba(0, 0, 0, 0.5)",
        //         },
        //       },
        //     },
        //   ],
        // },
      };
    },
    computed: {
      options() {
        return {
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: this.goodsName2,
          },
          series: [
            {
              name: "商品销售",
              type: "pie",
              labelLine: {
                normal: {
                  length: 35, // 改变标示线的长度
                },
              },
              center: ["50%", "60%"],
              data: this.goodsValue,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
      },
    },
  };
</script>
<style></style>
