Skip to content

S
SuperMan
Commit adec9303 authored by 罗超's avatar 罗超
Browse files
Options

个人中心数据统计

parent a089990d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3139 additions and 1732 deletions
src/App.vue
View file @ adec9303
......@@ -113,7 +113,7 @@ export default {
}
</script>
<style>
@import "//at.alicdn.com/t/font_635492_7l7pdpshnqc.css";
@import "//at.alicdn.com/t/font_635492_gouhqyxuk3g.css";
@import "./assets/css/Semibold.css";
@import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css";
......
src/components/SalesModule/groupTourOrder.vue
View file @ adec9303
......@@ -3900,8 +3900,10 @@
this.userId = this.getLocalStorage().EmployeeId
if (this.$route.query.id) {
this.msg.tempOrderId = this.$route.query.id
}else{
this.msg.QStartDate = new Date().Format('yyyy-MM-dd')
}
this.msg.QStartDate = new Date().Format('yyyy-MM-dd')
this.getEmployee()
this.getList()
this.getLineList()
......
src/components/index.vue
View file @ adec9303
......@@ -3637,8 +3637,8 @@ export default {
color:#333333;
}
.changelanguage .el-dropdown-menu__item:hover{
background: #D9D9D9;
color:#333333;
background: #D9D9D9 !important;
color:#333333 !important;
}
._dropdown.el-dropdown-menu {
padding: 0;
......@@ -3744,8 +3744,8 @@ export default {
._dropdown_other.el-dropdown-menu__item:hover,
._dropdown_other.el-dropdown-menu__item:focus {
transition: background-color 0.3s ease;
background-color: #f7f8fa;
color:#5d78ff;
background-color: #f7f8fa !important;
color:#5d78ff !important;
}
._dropdown .popper__arrow::after {
border-bottom-color: transparent !important;
......
src/components/personalCenter.vue
View file @ adec9303
This diff is collapsed.
src/components/personalCenter/cloud.vue
View file @ adec9303
<template>
<div class="cloud-c">
<div class="txt">已使用 506.83MB / 1GB</div>
<div class="txt">已使用 {{sumSize}} / 1GB</div>
<div class="progress">
<el-tooltip class="item" effect="dark" content="图片文件占用：25.6%" placement="top">
<div class="item green" style="width:25.6%"></div>
<el-tooltip class="item" effect="dark" :content="`图片文件占用：${result[0].zanbi}%`" placement="top">
<div class="item green" :style="{width:result[0].zanbi+'%'}"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="视频文件占用：7.4%" placement="top">
<div class="item yellow" style="width:7.4%"></div>
<el-tooltip class="item" effect="dark" :content="`视频文件占用：${result[1].zanbi}%`" placement="top">
<div class="item yellow" :style="{width:result[1].zanbi+'%'}"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="其他文件占用：15%" placement="top">
<div class="item red" style="width:15%"></div>
<el-tooltip class="item" effect="dark" :content="`其他文件占用：${result[2].zanbi}%`" placement="top">
<div class="item red" :style="{width:result[2].zanbi+'%'}"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="音频文件占用：2.03%" placement="top">
<div class="item blue" style="width:2.03%"></div>
<el-tooltip class="item" effect="dark" :content="`音频文件占用：${0}%`" placement="top">
<div class="item blue" :style="{width:0+'%'}"></div>
</el-tooltip>
</div>
<div class="tuli">
......@@ -32,7 +32,37 @@
</div>
</template>
<script>
export default {};
export default {
props:{
result:{
type:Array,
default:[]
}
},
data() {
return {
sumSize:'0'
}
},
mounted() {
let size=0
this.result.forEach(x => {
size+=x.fileSize
x.zanbi=(x.fileSize/(1024*1024)*100).toFixed(2)
x.zanbi=x.zanbi<1 &&x.zanbi>0?1:x.zanbi
});
this.sumSize=this.formatSize(size)
},
methods: {
formatSize(s){
if(s<1024){
return s+"KB"
}else{
return (parseFloat(s)/1024).toFixed(2)+"MB"
}
}
},
};
</script>
<style scoped>
.cloud-c .txt {
......
src/components/personalCenter/gonggao.vue
View file @ adec9303
<template>
<div class="ad">
<div class="ad" v-loading="loading">
<div class="content">
为逐步规范资金管理，贯彻落实公司制定的货币资金管理制度，从机制上保证资金安全，确保现金合理通畅运行。现就武汉西安昆明人民币指定收款账户作以下规范。各办事处每日下班前应将收到的人民币现金全额存入公司指定账户，以便核对各办事处收款情况；并报送相应现金收支日报表给总部分公司分管会计。具体分配详见附件
<div class="user">何娟</div>
<div class="time">2019-07-05</div>
<div class="notice-title">{{notices.title}}</div>
<div v-html="notices.content"></div>
<div class="user">{{notices.updateName}}</div>
<div class="time">{{notices.updateTime}}</div>
</div>
<div class="foot">
<div class="lt">
......@@ -13,18 +14,44 @@
</div>
</div>
<div class="rt">
<span class="disable">
<i class="iconfont icon-xingzhuang-1"></i>
</span>
<span>
<i class="iconfont icon-xingzhuang-"></i>
</span>
<span :class="{'disable':notices.maxID==0}" @click="queryNotice(notices.maxID)">
<i class="iconfont icon-xingzhuang-1"></i>
</span>
<span :class="{'disable':notices.minID==0}" @click="queryNotice(notices.minID)">
<i class="iconfont icon-xingzhuang-"></i>
</span>
</div>
</div>
</div>
</template>
<script>
export default {};
export default {
data() {
return {
notices: {},
loading: false
};
},
mounted() {
this.queryNotice(-1);
},
methods: {
queryNotice(id) {
if (id != 0) {
this.loading = true;
id = id == -1 ? 0 : id;
this.apipost(
"customerIndex_post_GetPersonalCenterNotice",
{ id },
r => {
this.notices = r.data.data;
this.loading = false;
}
);
}
}
}
};
</script>
<style>
.ad {
......@@ -40,6 +67,13 @@ export default {};
line-height: 25px;
position: relative;
}
.ad .content .notice-title {
padding-bottom: 10px;
font-size: 14px;
font-family: pingfangR;
color: #111;
text-align: center;
}
.ad .content .time,
.ad .content .user {
text-align: right;
......@@ -68,25 +102,25 @@ export default {};
color: #5d78ff;
text-decoration: #5d78ff;
}
.ad .foot .rt{
text-align: right;
flex: 1;
.ad .foot .rt {
text-align: right;
flex: 1;
}
.ad .foot .rt span{
display: inline-block;
height: 28px;
width: 28px;
line-height: 28px;
text-align: center;
background: #eef1ff;
color: #5d78ff;
margin-left: 30px;
font-size: 12px;
.ad .foot .rt span {
display: inline-block;
height: 28px;
width: 28px;
line-height: 28px;
text-align: center;
background: #eef1ff;
color: #5d78ff;
margin-left: 30px;
font-size: 12px;
}
.ad .foot .rt span.disable{
color: #CDD3EE;
.ad .foot .rt span.disable {
color: #cdd3ee;
}
.ad .foot .rt span i {
zoom: 0.1;
zoom: 0.1;
}
</style>
src/components/personalCenter/index.vue 0 → 100644
View file @ adec9303
This diff is collapsed.
src/components/personalCenter/myorder.vue
View file @ adec9303
......@@ -5,6 +5,12 @@
</template>
<script>
export default {
props:{
result:{
type:Array,
default:[]
}
},
data() {
return {};
},
......@@ -14,30 +20,12 @@ export default {
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [
"7月1日",
"7月2日",
"7月3日",
"7月4日",
"7月5日",
"7月6日",
"7月7日",
"7月8日",
"7月9日",
"7月10日",
"7月11日",
"7月12日",
"7月13日",
"7月14日",
"7月15日",
"7月16日",
"7月17日",
"7月18日",
"7月19日",
"7月20日",
"7月21日"
];
var data2 = [130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360];
var dataAxis = []
var data2 = []
this.result.forEach(x=>{
dataAxis.push(x.dayNum);
data2.push(x.allOrderGuestCount);
});
let option = {
backgroundColor: "#FFF", //"#19133e6e",
title: {
......
src/components/personalCenter/newpersonal.vue
View file @ adec9303
<template>
<div class="newpersonal-c">
<div class="item">
<img src="http://imgfile.oytour.com/New/Upload/User/636952712312267265.jpg" />
<div class="item" v-for="(item, index) in users" :key="index">
<img :src="item.EmPhoto" :onerror='defaultHeadImg'/>
<div class="content">
<div class="name-box">
肖萌
{{item.EmName}}
<i class="iconfont icon-nan nan"></i>
<el-tag size="mini" style="margin-left:10px">地接OP</el-tag>
<el-tag size="mini" style="margin-left:10px">{{item.PostName}}</el-tag>
</div>
<div class="last-msg">成都印象 · 日本线地接部 · 6月3日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
葛雯进
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">新人专员</el-tag>
</div>
<div class="last-msg">成都印象 · 总部业务六组（地州） · 6月11日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
胡明明
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
</div>
<div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
胡明明
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
</div>
<div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
<div class="last-msg">{{item.CompanyName}} · {{item.DepartmentName}} · 6月3日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
</div>
</template>
<script>
export default {};
export default {
props:{
users:{
type:Array,
default:[]
}
},
data() {
return {
defaultHeadImg:
'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
}
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.newpersonal-c {
......
src/components/personalCenter/pingtai.vue
View file @ adec9303
......@@ -5,6 +5,12 @@
</template>
<script>
export default {
props:{
result:{
type:Array,
default:[]
}
},
data() {
return {};
},
......@@ -14,7 +20,11 @@ export default {
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let dataItemName=[]
this.result.forEach(x=>{
dataItemName.push(x.name);
x.value=x.rate
})
let option = {
tooltip: {
trigger: "item",
......@@ -24,7 +34,7 @@ export default {
orient: "vertical",
left: "70%", //图例距离左的距离
top: "15%", //图例上下居中
data: ["B2B PC平台", "B2B 手机端", "确认件", "麦子助手", "ERP"]
data: dataItemName
},
calculable: true,
graphic: [
......@@ -93,13 +103,7 @@ export default {
}
}
},
data: [
{ value: 335, name: "B2B PC平台" },
{ value: 310, name: "B2B 手机端" },
{ value: 234, name: "确认件" },
{ value: 135, name: "麦子助手" },
{ value: 1548, name: "ERP" }
]
data: this.result
}
]
};
......
src/components/personalCenter/sell.vue
View file @ adec9303
......@@ -2,20 +2,20 @@
<div class="sell-box">
<div class="top">
<div class="h">
<img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
<img :src="champion.employeeImg" :onerror="defaultHeadImg" />
</div>
<img class="caidai" src="../../assets/img/persion/caidai.png" />
<div class="money">
￥<span class="big">156800.00</span>
￥<span class="big">{{champion.weekTotalIncome}}</span>
</div>
</div>
<div class="bottom">
<div class="t">
<div class="l">
<img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
<img :src="champion.employeeImg" />
<div class="content">
<div class="name-box">
徐数学
{{champion.employeeName}}
</div>
<div class="last-msg">成都印象 · 欧洲销售组</div>
</div>
......@@ -26,12 +26,32 @@
</div>
</div>
<div class="remark">
徐数学在本期的排名中取得了156800.00的业绩，领先第二名51800.00，这是他第18次获得销售周冠的称号，想看他的成功秘笈？戳下面的按钮查看吧！
徐数学在本期的排名中取得了{{champion.weekTotalIncome}}的业绩，领先第二名51800.00，这是他第18次获得销售周冠的称号，想看他的成功秘笈？戳下面的按钮查看吧！
</div>
<div class="more-btn">立即查看</div>
</div>
</div>
</template>
<script>
export default {
props:{
champion:{
type:Object,
default:{}
}
},
data() {
return {
defaultHeadImg:
'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
}
},
mounted() {
},
}
</script>
<style>
.sell-box {
}
......
src/components/personalCenter/todayOpera.vue
View file @ adec9303
<template>
<div class="timelines">
<div class="split"></div>
<div class="line">
<div class="time">15:00</div>
<div class="smybile orange"></div>
<div class="operaContent">通过ERP后台，下载了0718“让你玩好·九”系列的WORD行程</div>
</div>
<div class="line">
<div class="time">14:03</div>
<div class="smybile"></div>
<div class="operaContent">录入订单编号为：“11123”的旅客，唐杰的信息</div>
</div>
<div class="line">
<div class="time">13:40</div>
<div class="smybile orange"></div>
<div class="operaContent">通过ERP后台，报入0718“让你玩好·九”系列12人</div>
</div>
<div class="line">
<div class="time">13:35</div>
<div class="smybile red"></div>
<div class="operaContent">通过了财务单号：“31520”的审批</div>
</div>
<div class="line">
<div class="time">13:20</div>
<div class="smybile"></div>
<div class="operaContent">通过APP分享了0718“让你玩好·九”系列的行程</div>
</div>
<div class="line">
<div class="time">11:00</div>
<div class="smybile"></div>
<div class="operaContent orange">新增客户拜访任务，将于7月20日拜访"全球通金牛区门店"客户。</div>
</div>
<div class="line">
<div class="time">10:00</div>
<div class="smybile"></div>
<div class="operaContent">通过手机APP报名，报入0718“让你玩好·九”系列1人</div>
</div>
<div class="line">
<div class="time">09:45</div>
<div class="smybile red"></div>
<div class="operaContent">新增收款单，收款金额5500元</div>
</div>
<div class="line">
<div class="time">09:20</div>
<div class="smybile green"></div>
<div class="operaContent">打卡上班了</div>
<div class="split"></div>
<div class="line" v-for="(item, index) in d" :key="index">
<div class="time">{{item.Time}}</div>
<div class="smybile" :class="{'orange':item.Type==2,'red':item.Type==3,'green':item.Type==1}"></div>
<div class="operaContent">{{item.Content}}</div>
</div>
</div>
</template>
......@@ -52,26 +12,45 @@
export default {
data() {
return {
d: []
d: [],
loading: true
};
},
mounted() {
this.queryOpera();
},
methods: {
queryOpera() {
let PageIndex = 0;
let PageSize = 0;
this.loading = true;
this.apipost(
"orderlog_post_GetToDayOperationLog",
{ PageIndex, PageSize },
r => {
this.d = r.data.data;
this.loading = false;
}
);
}
}
};
</script>
<style scoped>
.timelines {
position: relative;
position: relative;
}
.timelines .line {
display: flex;
margin-bottom: 22px;
}
.timelines .split{
width: 2px;
background: #E7E9F5;
position: absolute;
top: 4px;
bottom: 4px;
left: 66px;
.timelines .split {
width: 2px;
background: #e7e9f5;
position: absolute;
top: 4px;
bottom: 4px;
left: 66px;
}
.timelines .line .time {
font-size: 16px;
......@@ -87,16 +66,16 @@ export default {
position: relative;
border-radius: 100%;
margin: 4px 15px 0 10px;
background: #FFF;
background: #fff;
}
.timelines .line .smybile.orange{
border-color: #ffb822 !important;
.timelines .line .smybile.orange {
border-color: #ffb822 !important;
}
.timelines .line .smybile.red{
border-color: #fd397a !important;
.timelines .line .smybile.red {
border-color: #fd397a !important;
}
.timelines .line .smybile.green{
border-color: #0abb87 !important
.timelines .line .smybile.green {
border-color: #0abb87 !important;
}
.timelines .line .smybile::after {
border: 3px solid #fff;
......
src/components/personalCenter/tousu.vue
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
<div :style="{height:'100%',width:'100%'}" v-show="result && result.length>0" ref="myLineRank"></div>
<div v-if="!result || result.length==0" class="none-data">
非常棒，你到现在还没有过客人投诉哟。
</div>
</div>
</template>
<script>
export default {
props:{
result:{
type:Array,
default:[]
}
},
data() {
return {};
return {
tousus:null,
loading:true
};
},
mounted() {
this.init();
if(this.result && this.result.length>0){
this.init();
}
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let dataItemName=[]
this.result.forEach(x=>{
dataItemName.push(x.name);
x.value=x.rate*100
})
let data=this.result.filter(x=>{
if(x.value>0)
return x
})
let option = {
tooltip: {
trigger: "item",
......@@ -24,7 +46,7 @@ export default {
orient: "vertical",
left: "40%", //图例距离左的距离
top: "12%", //图例上下居中
data: ["行程景点", "酒店住宿", "销售责任", "导游服务"]
data: dataItemName
},
calculable: true,
graphic: [
......@@ -94,12 +116,7 @@ export default {
}
}
},
data: [
{ value: 1, name: "行程景点" },
{ value: 3, name: "酒店住宿" },
{ value: 2, name: "销售责任" },
{ value: 4, name: "导游服务" }
]
data: data
}
]
};
......@@ -109,9 +126,15 @@ export default {
}
};
</script>
<style>
<style scoped>
.inerank-container {
height: 100%;
width: 100%;
}
.none-data{
padding: 50px 0;
text-align: center;
color: gray;
font-size: 12px;
}
</style>
src/components/visualization/dailyAnalysis.vue 0 → 100644
View file @ adec9303
This diff is collapsed.
src/components/visualization/pingtai.vue 0 → 100644
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: []
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let dataAlias=[]
let data2=[]
this.data.forEach(x=>{
if(x.Num>0){
dataAlias.push(x.Name)
let t={}
t.name=x.Name
t.value=x.Num
data2.push(t)
}
})
console.log(dataAlias)
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "50%", //图例距离左的距离
top: "10%", //图例上下居中
data: dataAlias,
textStyle:{//图例文字的样式
color:'#FFF',
fontSize:12
}
},
calculable: true,
series: [
{
center: ["25%", "45%"],
name: "订单来源",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 10,
borderColor: "#019CFF1a",
color: function(params) {
//自定义颜色
var colorList = [
"#FFB822",
"#34BFA3",
"#FD3995",
"#5D78FF",
"#8e44ad",
"#2c3e50",
"#16a085"
];
return colorList[params.dataIndex];
}
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/visualization/priceQujian.vue 0 → 100644
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: []
}
},
watch: {
data: {
handler: function(val, oldVal) {
if (val) {
this.init();
}
}
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data = [];
var dataXAxis = [];
this.data.forEach(x => {
data.push(x.GuestNum)
dataXAxis.push(x.Ratio)
dataAxis.push(x.Descritpion)
});
// let tempData=JSON.parse(JSON.stringify(this.data))
// tempData.reverse().forEach(x => {
// dataAxis.push(x.departmentName+' '+(x.sales/10000).toFixed(2)+'W')
// data.push(x.sales)
// });
var yMax = 2000;
var dataShadow = [];
for (var i = 0; i < 6; i++) {
dataShadow.push(yMax);
}
let option = {
title: {
text: "",
subtext: "",
show: false
},
xAxis: {
type: "value",
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10,
splitLine: {
show: false
}
},
yAxis: {
type: "category",
data: dataAxis,
inside: true,
axisLine: {
show: true,
lineStyle: {
color: ["#026ABF"]
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#C2D7EB",
fontFamily: "pingfang"
},
inside: true,
padding: [2, 0, 0, -80]
},
splitLine: {
lineStyle: {
color: "#272938",
type: "dotted"
},
show: false
}
},
grid: {
left: "80",
right: "10",
top: "10",
bottom: "0"
},
series: [
{
// For shadow
type: "bar",
itemStyle: {
normal: { color: "#0447944d", barBorderRadius: [0, 0, 0, 0] }
},
barGap: "-100%",
barCategoryGap: "40%",
data: dataShadow,
animation: false,
barWidth: 6
},
{
type: "bar",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#D367D2" },
{ offset: 1, color: "#6246F6" }
]),
barBorderRadius: [0, 0, 0, 0],
label: {
show: true,
position: "right",
padding: [0, 0, 0, 10],
textStyle: {
color: "white"
}
}
},
emphasis: {
color: "#44c4ed"
}
},
barWidth: 6,
data: data,
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function(idx) {
return Math.random() * 200;
}
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/visualization/progress.vue 0 → 100644
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'130%'}" ref="myLineRank"></div>
<div class="title" v-if="rank==-1">收客{{this.count}}人</div>
<div class="h-title" :style="{color:color}" v-else>
<span class="blod">团队排名 {{rank==0?'未上榜':"NO."+rank}}</span>
收客{{this.count}}人
</div>
</div>
</template>
<script>
export default {
props: {
percent: {
type: Number,
default: 0
},
item: {
type: String,
default: ""
},
count: {
type: Number,
default: 0
},
color: {
type: String,
default: "#46C3F1"
},
rank: {
type: Number,
default: -1
}
},
data() {
return {
center: ["35%", "35%"],
pos:"16%"
};
},
mounted() {
if (this.rank != -1) {
this.center = ["50%", "35%"];
this.pos ='31%';
}
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let option = {
grid: {
top: 5,
bottom: 5
},
graphic: [
{
type: "text",
left: this.pos,
top: "25%",
style: {
text: this.percent + "%",
textAlign: "center",
fill: "#FFF", //文字的颜色
fontSize: 20,
width: 120,
fontFamily: "pingfangR"
}
},
{
type: "text",
left: this.pos,
top: "43%",
style: {
text: this.item,
textAlign: "center",
fill: this.color, //文字的颜色
fontSize: 14,
fontFamily: "pingfangR"
}
}
],
// color: colors,
series: [
{
name: "valueOfMarket",
type: "pie",
center: this.center,
radius: ["60%", "70%"],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#019CFF1a"
}
},
data: [
{
value: this.percent,
name: this.item,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: this.color
}
}
},
{
value: 100 - this.percent,
name: "",
label: {
normal: {
show: false
}
},
color: "#019CFF1a"
}
]
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
position: relative;
}
.inerank-container .title {
position: absolute;
left: 0%;
bottom: 15px;
font-size: 12px;
color: #46c3f1;
text-align: center;
width: 100%;
}
.inerank-container .h-title {
position: absolute;
left: 0%;
bottom: 14px;
font-size: 12px;
color: #46c3f1;
text-align: center;
width: 100%;
}
.inerank-container .h-title .blod {
color: #facc37;
font-size: 14px;
font-family: pingfangR;
display: block;
margin-bottom: 3px;
}
</style>
src/components/visualization/shoukequ.vue 0 → 100644
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
data:{
type:Array,
default:[]
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let dataAxis = [];
let data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.Month+"月")
data2.push(x.GuestNum)
})
let option = {
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#DADADA",
fontSize: 12
},
margin: 10,
interval: 0,
show: true
},
type: "category",
axisTick: {
show: true
},
axisLine: {
show: true
}
},
yAxis: {
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: "#DADADA",
fontSize: 12
},
show: true
},
splitLine: {
show: false
}
},
grid: {
left: "38",
right: "0",
top: "10",
bottom: "25"
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: "#6a7985"
}
}
},
series: [
{
type: "line",
smooth: true,
symbol: "none",
left: "0",
itemStyle: {
normal: {
lineStyle: {
color: "#FD397A"
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#CE448D" },
{ offset: 1, color: "#CE448D00" }
])
},
color: "#FD397A"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/visualization/yeji.vue 0 → 100644
View file @ adec9303
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: []
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.Month+'月')
data2.push(x.SaleMoney)
})
let option = {
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#DADADA",
fontSize: 12
},
margin: 10,
interval: 0,
show: true
},
type: "category",
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: ["#12397C"]
}
}
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: ["#12397C"]
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#DADADA",
fontSize: 12
},
show: true
},
splitLine: {
show: false
},
scale: true
},
grid: {
left: "68",
right: "0",
top: "10",
bottom: "25"
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: "#6a7985"
}
}
},
series: [
{
type: "bar",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#4487F0" },
{ offset: 0.3, color: "#4487F0" },
{ offset: 1, color: "#B0D0F8" }
])
}
},
barWidth: 18,
data: data2,
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function(idx) {
return Math.random() * 200;
}
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/plug/index.js
View file @ adec9303
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment