<template>
<div>

    <div id="projectListCharts" ></div>
    <router-link to="/baseProject" v-role='400500'>
          <el-button size="mini" type="primary">项目列表</el-button>
        </router-link>
        <router-link to="memberList" v-role='400700'>
          <el-button size="mini" type="primary">会员列表</el-button>
        </router-link>
        <router-link to="baseStaff" v-role='400200'>
          <el-button size="mini" type="primary">员工列表</el-button><br>
        </router-link>
        <router-link to="/line" v-role='500100'>
          <el-button size="mini" type="primary">预约叫号</el-button>
        </router-link>
        <router-link to='/collectionList' v-role='500300'>
          <el-button size="mini" type="primary">充值卡</el-button>
        </router-link>
        <router-link to="/reatment" v-role='500400'>
          <el-button size="mini" type="primary">购疗程</el-button>
        </router-link>
        <router-link to="/service" v-role='500200'>
          <el-button size="mini" type="primary">服务单</el-button>
        </router-link>
        <router-link to="/refundRecharge" v-role='500500'>
          <el-button size="mini" type="primary">充值退</el-button>
        </router-link>
        <router-link to="/refundCourse" v-role='500600'>
          <el-button size="mini" type="primary">疗程退</el-button>
        </router-link>
        <router-link to="/refund" v-role='500700'>
          <el-button size="mini" type="primary">消费退</el-button>
        </router-link>
        <router-link to="/packing" v-role='700100'>
          <el-button size="mini" type="primary">促销活动</el-button>
        </router-link>
        <router-link to="/repayment" v-role='500800'>
          <el-button size="mini" type="primary">还款单</el-button>
        </router-link>
</div>

</template>

<script>
export default {
    methods:{
      loading(){
       this.$echarts
          .init(document.getElementById("projectListCharts"))
          .setOption({
            backgroundColor: "#eee",
            title: {
              text: "项目贡献统计",
              subtext: new Date().toLocaleDateString(),
              right: 10,
              y: 10,
            },
            tooltip: {
              trigger: "item",
              showDelay: 20,
              formatter: "{a} <br/>{b} : ¥{c} ({d}%)",
              padding: 5,
            },
            legend: {
              orient: "vertical",
              left: "left",
              itemWidth: 16,
              data: [
                "个人面部基础护理",
                "面部补水保湿",
                "面部美白嫩肤",
                "火山泥SAP",
                "面部理疗",
                "洗剪吹",
                "烫发",
                "做发",
                "染发",
                "洗发",
              ],
            },
            series: [
              {
                name: "项目贡献",
                type: "pie",
                radius: "50%",
                center: ["55%", "65%"],
                data: [
                  { value: 3688, name: "洗剪吹" },
                  { value: 685, name: "烫发" },
                  { value: 982, name: "做发" },
                  { value: 1099, name: "染发" },
                  { value: 1005, name: "个人面部基础护理" },
                  { value: 1788, name: "面部补水保湿" },
                  { value: 1890, name: "面部美白嫩肤" },
                  { value: 1355, name: "面部理疗" },
                  { value: 7900, name: "火山泥SAP" },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      },
    },
    mounted(){
        this.loading()
    }

}
</script>

<style scoped>
#projectListCharts{
    width: 100%;
    height: 100%;
}
</style>