You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
4.1 KiB
Vue
123 lines
4.1 KiB
Vue
<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> |