Skip to content

C
CRM
Commit 0bc9b603 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

parents d6849564 5a1440a0
Show whitespace changes
Inline Side-by-side
Showing with 1045 additions and 242 deletions
src/components/Home.vue
View file @ 0bc9b603
...@@ -6,14 +6,12 @@ ...@@ -6,14 +6,12 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>客户简报</span> <span>客户简报</span>
</div> </div>
<div class="shang-list" > <div class="shang-list">
<div class="shang-list-item"> <div class="shang-list-item">
<div class="icon"> <div class="icon">
<i class="iconfont iconVerifiedcustomername"></i> <i class="iconfont iconVerifiedcustomername"></i>
</div> </div>
<div class="title"> <div class="title">新增客户</div>
新增客户
</div>
<div class="result">10</div> <div class="result">10</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -25,9 +23,7 @@ ...@@ -25,9 +23,7 @@
<div class="icon orange"> <div class="icon orange">
<i class="iconfont iconlianxiren"></i> <i class="iconfont iconlianxiren"></i>
</div> </div>
<div class="title"> <div class="title">新增联系人</div>
新增联系人
</div>
<div class="result">30</div> <div class="result">30</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -39,9 +35,7 @@ ...@@ -39,9 +35,7 @@
<div class="icon green"> <div class="icon green">
<i class="iconfont iconshangji-"></i> <i class="iconfont iconshangji-"></i>
</div> </div>
<div class="title"> <div class="title">新增商机</div>
新增商机
</div>
<div class="result">5</div> <div class="result">5</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -53,9 +47,7 @@ ...@@ -53,9 +47,7 @@
<div class="icon blue"> <div class="icon blue">
<i class="iconfont icondingdan"></i> <i class="iconfont icondingdan"></i>
</div> </div>
<div class="title"> <div class="title">新增订单</div>
新增订单
</div>
<div class="result">9</div> <div class="result">9</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -67,9 +59,7 @@ ...@@ -67,9 +59,7 @@
<div class="icon red"> <div class="icon red">
<i class="iconfont iconjine"></i> <i class="iconfont iconjine"></i>
</div> </div>
<div class="title"> <div class="title">订单金额</div>
订单金额
</div>
<div class="result">3,000,000</div> <div class="result">3,000,000</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -81,9 +71,7 @@ ...@@ -81,9 +71,7 @@
<div class="icon zi"> <div class="icon zi">
<i class="iconfont iconmoney"></i> <i class="iconfont iconmoney"></i>
</div> </div>
<div class="title"> <div class="title">新增收款</div>
新增收款
</div>
<div class="result">200,000</div> <div class="result">200,000</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -95,9 +83,7 @@ ...@@ -95,9 +83,7 @@
<div class="icon yellow"> <div class="icon yellow">
<i class="iconfont iconbaifang"></i> <i class="iconfont iconbaifang"></i>
</div> </div>
<div class="title"> <div class="title">新增拜访</div>
新增拜访
</div>
<div class="result">9</div> <div class="result">9</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -109,9 +95,7 @@ ...@@ -109,9 +95,7 @@
<div class="icon grey"> <div class="icon grey">
<i class="iconfont icongenjin"></i> <i class="iconfont icongenjin"></i>
</div> </div>
<div class="title"> <div class="title">新增跟进</div>
新增跟进
</div>
<div class="result">30</div> <div class="result">30</div>
<div class="eq"> <div class="eq">
较上月 较上月
...@@ -127,7 +111,7 @@ ...@@ -127,7 +111,7 @@
<div class="tic-content"> <div class="tic-content">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col span="8"> <el-col span="8">
<img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;"> <img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;" />
</el-col> </el-col>
<el-col span="16"> <el-col span="16">
<div class="money-box"> <div class="money-box">
...@@ -139,11 +123,266 @@ ...@@ -139,11 +123,266 @@
</el-row> </el-row>
</div> </div>
<div class="tic-chart"> <div class="tic-chart">
<ticheng/> <ticheng />
</div> </div>
</el-card> </el-card>
<el-card class="zhou-card" shadow="never"> <el-card class="zhou-card" shadow="never">
<el-row :gutter="10">
<el-col span="10" class="title">本周销冠</el-col>
<el-col span="14" class="money-box">
<small>￥</small>
560000.00
</el-col>
</el-row>
<el-row>
<el-col span="24">
<span class="zhou-head">
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580985297255&di=d10539f3a69a8507564aaa3ac4fc131b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20170728%2F5843abd8cdb74745a2fe2349879cb055.jpeg"
alt
/>
</span>
</el-col>
</el-row>
<div class="zhou-name">吴彦祖（香港）</div>
<div class="zhou-depart">
香港印象
<b>·</b>销售一组
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-top:25px;">
<el-col span="10">
<el-card class="sum-card" shadow="never">
<div slot="header" class="clearfix">
<span>数据汇总</span>
</div>
<div class="sum-list">
<div class="sum-list-item">
<div class="icon"></div>
<div class="item-name">客户汇总</div>
<div class="item-hui">
新增客户
<b>0</b>个
</div>
<div class="item-hui">
转成交客户
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon green"></div>
<div class="item-name">跟进汇总</div>
<div class="item-hui">
跟进客户
<b>0</b>个
</div>
<div class="item-hui">
新增客户中未跟进
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon blue"></div>
<div class="item-name">商机汇总</div>
<div class="item-hui">
新增商机
<b>0</b>个
</div>
<div class="item-hui">
赢单商机
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon zi"></div>
<div class="item-name">订单汇总</div>
<div class="item-hui">
新增订单
<b>0</b>个
</div>
<div class="item-hui">
订单金额
<b>0</b>万
</div>
</div>
<!-- <div class="sum-list-item">
<div class="icon qing"></div>
<div class="item-name">待收款金额汇总</div>
<div class="item-hui">未收金额<b>0</b>万</div>
<div class="item-hui">已收金额<b>0</b>万</div>
</div>-->
</div>
</el-card>
</el-col>
<el-col span="6">
<el-card class="notinmoney-card" shadow="never">
<div class="title">待收款汇总</div>
<div class="money">
<small>￥</small>3,600,000.00
</div>
<div class="charts-box">
<notincome />
</div>
</el-card>
</el-col>
<el-col span="8">
<el-card class="sum-card ding" shadow="never">
<div slot="header" class="clearfix">
<span>遗忘提醒</span>
</div>
<div class="sum-list">
<div class="sum-list-item">
<div class="icon"></div>
<div class="item-name">超过7天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon green"></div>
<div class="item-name">超过15天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon blue"></div>
<div class="item-name">超过30天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon zi"></div>
<div class="item-name">超过3个月未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon qing"></div>
<div class="item-name">超过6个月未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon block"></div>
<div class="item-name">逾期未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-top:25px;">
<el-col span="16">
<el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix">
<el-row>
<el-col :span="12">
<span>排行榜</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择">
<el-option label="销售额排名" value="1"></el-option>
<el-option label="新增客户排名" value="2"></el-option>
<el-option label="新增商机排名" value="3"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<div class="rank-list">
<div class="rank-list-item">
<div class="rank red">NO.1</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank zi">NO.2</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank blue">NO.3</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.4</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.5</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.6</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
</div>
</el-card>
</el-col>
<el-col span="8">
<el-card class="loudou-card" shadow="never">
<div slot="header" class="clearfix">
<el-row>
<el-col :span="12">
<span>销售漏斗</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择">
<el-option label="商机漏斗图" value="1"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<div style="width:100%;height:100%;">
<sjld/>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -151,10 +390,19 @@ ...@@ -151,10 +390,19 @@
</template> </template>
<script> <script>
import ticheng from './chart/ticheng' import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from './chart/shangjiloudou'
export default { export default {
components:{ components: {
ticheng ticheng,
notincome,
sjld
},
data() {
return {
rankType: "1"
};
} }
}; };
</script> </script>
...@@ -162,143 +410,378 @@ export default { ...@@ -162,143 +410,378 @@ export default {
<style> <style>
.home { .home {
width: 100%; width: 100%;
margin-bottom: 25px;
} }
.el-card__header{ .el-card__header {
font-family: perfectFont; font-family: perfectFont;
font-weight: bold; font-weight: bold;
} }
.el-card, .el-message{ .el-card,
.el-message {
border-radius: 0 !important; border-radius: 0 !important;
} }
.box-card .shang-list{ .box-card .shang-list {
}
.box-card,
.sum-card,
.rank-card {
padding-bottom: 20px;
}
.box-card .el-card__body,
.sum-card .el-card__body,
.rank-card .el-card__body {
height: 358px; height: 358px;
overflow-y:auto; overflow-y: hidden;
padding: 0px 20px !important;
margin-top: 20px;
}
.box-card .el-card__body:hover,
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover{
overflow-y: auto;
padding-right: 16px !important;
} }
.box-card .shang-list .shang-list-item{ .box-card .shang-list .shang-list-item {
margin-bottom: 5px; margin-bottom: 5px;
height: 54px; height: 54px;
background: rgba(242,242,242,1); background: rgba(242, 242, 242, 1);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.box-card .shang-list .shang-list-item .icon{ .box-card .icon {
width: 26px; width: 26px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
background: rgba(13,36,129,1); background: rgba(13, 36, 129, 1);
color: #FFF; color: #fff;
margin:0 25px; margin: 0 25px;
} }
.box-card .shang-list .shang-list-item .title{ .box-card .shang-list .shang-list-item .title {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
width: 80px; width: 80px;
/* font-weight: bold; /* font-weight: bold;
font-family: perfectFont; */ font-family: perfectFont; */
} }
.box-card .shang-list .shang-list-item .result{ .box-card .shang-list .shang-list-item .result {
flex:1; flex: 1;
padding-left: 130px; padding-left: 130px;
font-size: 20px; font-size: 20px;
font-family: perfectFont; font-family: perfectFont;
color:#000; color: #000;
font-weight: bold; font-weight: bold;
} }
.box-card .shang-list .shang-list-item .eq{ .box-card .shang-list .shang-list-item .eq {
width: 180px; width: 180px;
font-size: 12px; font-size: 12px;
color:gray; color: gray;
} }
.box-card .shang-list .shang-list-item .eq i{ .box-card .shang-list .shang-list-item .eq i {
font-size: 26px; font-size: 26px;
margin-left: 30px; margin-left: 30px;
margin-right: 15px; margin-right: 15px;
color: #333; color: #333;
vertical-align: sub; vertical-align: sub;
} }
.box-card .shang-list .shang-list-item .eq .val{ .box-card .shang-list .shang-list-item .eq .val {
font-size: 20px; font-size: 20px;
font-family: perfectFont; font-family: perfectFont;
} }
.box-card .shang-list .shang-list-item .eq .green{ .box-card .shang-list .shang-list-item .eq .green {
color: rgb(16,124,16); color: rgb(16, 124, 16);
} }
.box-card .shang-list .shang-list-item .eq .red{ .box-card .shang-list .shang-list-item .eq .red {
color: rgb(195,0,82); color: rgb(195, 0, 82);
} }
.box-card .shang-list .shang-list-item .icon i{ .box-card .icon i {
font-size: 14px; font-size: 14px;
} }
.box-card .shang-list .shang-list-item .icon.green{ .box-card .icon.green {
background: rgb(16,124,16); background: rgb(16, 124, 16);
} }
.box-card .shang-list .shang-list-item .icon.blue{ .box-card .icon.blue {
background: rgb(0,99,177); background: rgb(0, 99, 177);
} }
.box-card .shang-list .shang-list-item .icon.orange{ .box-card .icon.orange {
background: rgb(202,80,16); background: rgb(202, 80, 16);
} }
.box-card .shang-list .shang-list-item .icon.grey{ .box-card .icon.grey {
background: rgb(118,118,118); background: rgb(118, 118, 118);
} }
.box-card .shang-list .shang-list-item .icon.red{ .box-card .icon.red {
background: rgb(195,0,82); background: rgb(195, 0, 82);
} }
.box-card .shang-list .shang-list-item .icon.zi{ .box-card .icon.zi {
background: rgb(136,23,152); background: rgb(136, 23, 152);
} }
.box-card .shang-list .shang-list-item .icon.yellow{ .box-card .icon.yellow {
background: rgb(255,185,0); background: rgb(255, 185, 0);
} }
.tic-card{ .tic-card {
padding:0px; padding: 0px;
height:190px; height: 196px;
border:none; border: none;
} }
.tic-card .el-card__body, .tic-card .el-card__body,
.zhou-card .el-card__body{ .zhou-card .el-card__body,
padding:0px; .notinmoney-card .el-card__body {
padding: 0px;
} }
.tic-card .tic-content{ .tic-card .tic-content {
height: 83px; height: 83px;
width:100%; width: 100%;
} }
.tic-card .tic-content .money-box{ .tic-card .tic-content .money-box {
margin-top:20px; margin-top: 20px;
margin-right:30px; margin-right: 30px;
color:#00C5C8; color: #00c5c8;
font-family: perfectFont; font-family: perfectFont;
text-align: right; text-align: right;
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.tic-card .tic-content .money-box small{ .tic-card .tic-content .money-box small {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.tic-card .tic-content .tips{ .tic-card .tic-content .tips {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
margin-right:30px; margin-right: 30px;
text-align: right; text-align: right;
} }
.tic-card .tic-chart{ .tic-card .tic-chart {
height: 107px; height: 111px;
width:100%; width: 100%;
} }
.zhou-card{ .zhou-card {
padding:0px; padding: 0px;
height:150px; border: none;
border:none; background: rgba(13, 36, 129, 1);
background: rgba(13,36,129,1); margin-top: 25px;
margin-top: 30px;
height: 236px; height: 236px;
} }
.zhou-card .el-card__body{ .zhou-card .el-card__body {
padding:0px; padding: 0px;
background: rgba(13,36,129,1); background: url("../assets/img/home/zhouguan.png") rgba(13, 36, 129, 1);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.zhou-card .title {
font-size: 20px;
font-family: perfectFont;
color: #fff;
padding: 10px 0 0 0px;
text-indent: 20px;
}
.zhou-card .money-box {
margin-top: 10px;
padding-right: 20px !important;
color: #fff;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.zhou-card .money-box small {
font-size: 12px;
font-weight: 500;
}
.zhou-card .zhou-head {
margin: 10px auto;
display: block;
width: 70px;
height: 70px;
background: rgba(85, 189, 233, 0.2);
padding: 4px;
border-radius: 100%;
}
.zhou-card .zhou-head img {
width: 100%;
height: 100%; height: 100%;
border-radius: 100%;
}
.zhou-card .zhou-name {
font-size: 14px;
color: #fff;
font-family: perfectFont;
font-weight: bold;
text-align: center;
}
.zhou-card .zhou-depart {
font-size: 14px;
color: #fff;
font-family: perfectFont;
text-align: center;
margin-top: 15px;
}
.sum-card .el-card__body {
height: 165px;
overflow-y: hidden;
padding-right: 20px;
}
.sum-card .sum-list {
}
.sum-card .sum-list .sum-list-item {
height: 45px;
border-bottom: 1px solid #e2e4ef;
display: flex;
align-items: center;
}
.sum-card .sum-list .sum-list-item .icon {
width: 4px;
height: 12px;
margin-right: 10px;
background: #ffa475;
}
.sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
}
.sum-card .sum-list .sum-list-item .icon.blue {
background: #0d2481;
}
.sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
}
.sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
}
.sum-card .sum-list .sum-list-item .icon.black {
background: #333;
}
.sum-card .sum-list .sum-list-item .item-name {
width: 90px;
font-size: 12px;
}
.ding .sum-list .sum-list-item .item-name {
width: 150px;
}
.sum-card .sum-list .sum-list-item .item-hui {
flex: 1;
font-size: 12px;
text-align: right;
}
.sum-card .sum-list .sum-list-item .item-hui b {
font-weight: bold;
font-size: 22px;
font-family: perfectFont;
margin: 0 5px;
}
.notinmoney-card {
height: 268px;
}
.notinmoney-card .title {
font-size: 17px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
}
.notinmoney-card .money {
font-size: 30px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
color: #ffa475;
}
.notinmoney-card .charts-box {
height: 178px;
}
.notinmoney-card .money small {
font-size: 12px;
font-weight: 400;
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding-right: 20px;
}
.rank-list {
}
.rank-list .rank-list-item {
height: 85px;
display: flex;
align-items: center;
cursor: default;
user-select: none;
}
.rank-list .rank-list-item:hover{
background: #F4F5F9;
}
.rank-list .rank-list-item .rank{
width: 200px;
font-size: 18px;
color:#999;
font-family: perfectFont !important;
font-weight: bold;
}
.rank-list .rank-list-item .rank.blue{
color:#0D2481;
}
.rank-list .rank-list-item .rank.red{
color:rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi{
color:rgb(136, 23, 152);
}
.rank-list .rank-list-item .head{
width: 70px;
}
.rank-list .rank-list-item .rank-name{
width: 200px;
font-size: 12px;
color: #666;
}
.rank-list .rank-list-item .rank-name .rn{
font-family: perfectFont !important;
font-weight: bold;
color: #333;
font-size: 16px;
}
.rank-list .rank-list-item .score{
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.option-item{
text-align:right;
}
.option-item .el-select>.el-input {
display: block;
background: #0d2481;
border-radius: 0;
}
.option-item .el-input--mini .el-input__inner {
height: 28px;
line-height: 28px;
background: #0d2481;
border-radius: 0;
color: #F1f1f1;
}
.option-item .el-select .el-input.is-focus .el-input__inner {
border-color: #0d2481;
}
.el-select-dropdown{
border-radius: 0px !important;
}
.el-select-dropdown__item.selected{
font-family: perfectFont !important;
color: #0d2481 !important;
}
.el-select-dropdown__item{
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.loudou-card .el-card__header{
border: none;
} }
</style> </style>
\ No newline at end of file
src/components/chart/noincome.vue 0 → 100644
View file @ 0bc9b603
<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 {
datatwo:[]
};
},
mounted() {
this.data=[
{
dataStr:'8月',
preferPrice:12000
},
{
dataStr:'9月',
preferPrice:120000
},
{
dataStr:'10月',
preferPrice:80000
},
{
dataStr:'11月',
preferPrice:85000
},
{
dataStr:'12月',
preferPrice:7000
},
{
dataStr:'1月',
preferPrice:160000
},
{
dataStr:'2月',
preferPrice:300000
},
]
this.datatwo=[
{
dataStr:'9月',
preferPrice:480000
},
{
dataStr:'10月',
preferPrice:120000
},
{
dataStr:'11月',
preferPrice:850000
},
{
dataStr:'12月',
preferPrice:70000
},
{
dataStr:'1月',
preferPrice:320000
},
{
dataStr:'2月',
preferPrice:700000
},
]
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.dataStr)
data2.push(x.preferPrice)
})
let option = {
// backgroundColor: "#0abb87", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
}
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: '#FAB6B6'
}
}
},
series: [
{
name: "未收款",
type: "bar",
smooth: false,
symbol: "circle",
barBorderRadius:[10, 10, 10, 10],
barWidth:14,
itemStyle: {
normal: {
lineStyle: {
color: "##0D2481"
},
areaStyle: {
color: "#00C5C8"
},
color:"#0D2481"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/chart/shangjiloudou.vue 0 → 100644
View file @ 0bc9b603
<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.data = [
{
dataStr: "9月",
preferPrice: 12000
},
{
dataStr: "10月",
preferPrice: 8000
},
{
dataStr: "11月",
preferPrice: 8500
},
{
dataStr: "12月",
preferPrice: 7000
},
{
dataStr: "1月",
preferPrice: 16000
},
{
dataStr: "2月",
preferPrice: 0
}
];
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x => {
dataAxis.push(x.dataStr);
data2.push(x.preferPrice);
});
let option = (option = {
title: {
text: "漏斗图",
subtext: "纯属虚构",
show:false
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ["展现", "点击", "访问", "咨询", "订单"]
},
color:['#FF9459','#FFB18A','#FCBC9F','#F7C6B6','#EED8D4'],
series: [
{
name: "预期",
type: "funnel",
left: "10%",
width: "80%",
label: {
formatter: "{b}预期"
},
labelLine: {
show: false
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: "inside",
formatter: "{b}预期: {c}%"
}
},
data: [
{ value: 60, name: "访问" },
{ value: 40, name: "咨询" },
{ value: 20, name: "订单" },
{ value: 80, name: "点击" },
{ value: 100, name: "展现" }
]
},
{
name: "实际",
type: "funnel",
left: "10%",
width: "80%",
maxSize: "80%",
label: {
position: "inside",
formatter: "{c}%",
color: "#fff"
},
itemStyle: {
opacity: 0.5,
borderColor: "#fff",
borderWidth: 2
},
emphasis: {
label: {
position: "inside",
formatter: "{b}实际: {c}%"
}
},
data: [
{ value: 30, name: "访问" },
{ value: 10, name: "咨询" },
{ value: 5, name: "订单" },
{ value: 50, name: "点击" },
{ value: 80, name: "展现" }
]
}
]
});
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/views/index.vue
View file @ 0bc9b603
...@@ -36,24 +36,25 @@ ...@@ -36,24 +36,25 @@
.template-div{ .template-div{
position: absolute; position: absolute;
top: 90px; top: 90px;
left: 30px; left: 0;
right: 30px; right: 0;
bottom: 0; bottom: 0;
overflow-y: auto; overflow-y: auto;
padding: 0 30px;
} }
*::-webkit-scrollbar{ *::-webkit-scrollbar{
width: 4px; width: 4px;
height: 8px; height: 8px;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 4px; /* border-radius: 4px; */
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9; background: #555;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px; /* border-radius: 4px; */
background: #EDEDED; background: #555;
} }
</style> </style>
<template> <template>
......
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