Commit 67247df6 authored by 华国豪's avatar 华国豪 🙄

销售统计

parent 2c383fd7
...@@ -112,22 +112,22 @@ export default { ...@@ -112,22 +112,22 @@ export default {
}, },
grid: [{ grid: [{
left: 80, left: 40,
right: 10, right: 10,
top: '5%', top: '5%',
height: '16%' height: '16%'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '28%', top: '28%',
height: '16%' height: '16%'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '51%', top: '51%',
height: '16%' height: '16%'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '74%', top: '74%',
height: '16%' height: '16%'
......
...@@ -112,27 +112,27 @@ export default { ...@@ -112,27 +112,27 @@ export default {
}, },
grid: [{ grid: [{
left: 80, left: 40,
right: 10, right: 10,
top: '40px', top: '40px',
height: '150px' height: '150px'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '250px', top: '250px',
height: '150px' height: '150px'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '460px', top: '460px',
height: '150px' height: '150px'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '670px', top: '670px',
height: '150px' height: '150px'
}, { }, {
left: 80, left: 40,
right: 10, right: 10,
top: '880px', top: '880px',
height: '150px' height: '150px'
......
...@@ -123,11 +123,9 @@ export default { ...@@ -123,11 +123,9 @@ export default {
formatter: function (params) { formatter: function (params) {
if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined
var res = "成交单价" var res = "成交单价"
res += '<br/> 5日平均: ' + params[0].value for(let i = 0; i < params.length; i ++) {
res += '<br/> 10日平均: ' + params[1].value res += '<br/> '+ params[i].seriesName +': ' + params[i].value
res += '<br/> 30日平均: ' + params[2].value }
res += '<br/> 90日平均: ' + params[3].value
res += '<br/> 180日平均: ' + params[4].value
// res += '<br/> 点击: ' + params[5].value // res += '<br/> 点击: ' + params[5].value
return res return res
} else { } else {
......
...@@ -242,8 +242,7 @@ ...@@ -242,8 +242,7 @@
<div class="xilie"> <div class="xilie">
<div>公司</div> <div>公司</div>
<div> <div>
<el-select v-model="outbranchid" placeholder="请选择" @change="init" popper-class="company-class"> <el-select v-model="outbranchid" placeholder="请选择" @change="changeCP" popper-class="company-class">
<el-option label="不限" :value="-1"></el-option>
<el-option <el-option
v-for="item in companyList" v-for="item in companyList"
:key="item.Id" :key="item.Id"
...@@ -257,9 +256,19 @@ ...@@ -257,9 +256,19 @@
<el-col :span="8"> <el-col :span="8">
<div class="xilie"> <div class="xilie">
<div>销售</div> <div>销售</div>
<div> <el-select v-model="saleId" placeholder="请选择" @change="init" popper-class="company-class">
<el-cascader class="width-100" :options="lineList" :props="{ checkStrictly: true }" v-model="selectedRegion" change-on-select/> <el-option
</div> :key="0"
label="不限"
:value="0">
</el-option>
<el-option
v-for="item in saleList"
:key="item.EmployeeId"
:label="item.EmName"
:value="item.EmployeeId">
</el-option>
</el-select>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -272,7 +281,7 @@ ...@@ -272,7 +281,7 @@
<div class="content" > <div class="content" >
<el-row :gutter="40" style="margin-bottom: 20px;"> <el-row :gutter="40" style="margin-bottom: 20px;">
<el-col :span="22"> <el-col :span="22">
<lineChart v-if="chartShow" :zoom="zoom" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/> <saleLineChartK v-if="chartShow2" :rightShow="rightShow" :DaysKData="DaysKData" :zoom="zoom" />
</el-col> </el-col>
<el-col :span="2" style="position: relative;"> <el-col :span="2" style="position: relative;">
<div class="open-btn" @click="drawer = true"> <div class="open-btn" @click="drawer = true">
...@@ -282,151 +291,66 @@ ...@@ -282,151 +291,66 @@
<div class="right-data"> <div class="right-data">
<!-- 报名人数 --> <!-- 报名人数 -->
<div> <div>
<div class="tab pingfangR"><span>报名人数</span></div> <div class="tab pingfangR"><span>基本信息</span></div>
</div> </div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>5日平均</div> <div>能力值</div>
<div>
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<!-- <div class="item">
<div>20日平均</div>
<div> <div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.SumScore}}
</div>
</div> </div>
<div class="item">
<div>60日平均</div>
<div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> -->
</div> </div>
<!-- 线路占比 --> <!-- 线路占比 -->
<div> <div>
<div class="tab pingfangR"><span>线路占比</span></div> <div class="tab pingfangR"><span>收客情况</span></div>
</div> </div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>30日平均</div> <div>月度</div>
<div>
{{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<!-- <div class="item">
<div>60日平均</div>
<div> <div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.MonthClient}}<span class="sub">%</span>
</div>
</div> </div>
<div class="item">
<div>90日平均</div>
<div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> -->
</div> </div>
<!-- 报名单 --> <!-- 报名单 -->
<div> <div>
<div class="tab pingfangR"><span>报名单</span></div> <div class="tab pingfangR"><span>客户</span></div>
</div> </div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>当日</div> <div>客户数</div>
<div class="bl-color"> <div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}} {{OutherData.SumClient}}
</div>
</div> </div>
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div>
</div> -->
</div>
<!-- 产品点击 --> <!-- 产品点击 -->
<div> <div>
<div class="tab pingfangR"><span>产品点击</span></div> <div class="tab pingfangR"><span>线路占比</span></div>
</div> </div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>当日</div> <div>{{OutherData.TopOneName}}</div>
<div class="pink-color"> <div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}} {{OutherData.TopOneCount}}
</div>
</div>
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div>
</div> -->
</div> </div>
<!-- 历史卖价 --> <!-- 历史卖价 -->
<div> <div>
<div class="tab pingfangR"><span>历史卖价</span></div> <div class="tab pingfangR"><span>历史卖价</span></div>
</div> </div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>最高</div> <div>最高</div>
<div class="red-color"> <div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span> {{OutherData.MaxTradeMoney}}<span class="sub"></span>
</div> </div>
</div> </div>
<!-- <div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div>
<div class="item">
<div>平均</div>
<div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div>
</div> -->
</div>
<!-- 成交量 -->
<div>
<div class="tab pingfangR"><span>成交量</span></div>
</div>
<div class="item-box" v-if="day_history_preferprice && day_history_preferprice.length > 0">
<div class="item">
<div>最高</div>
<div class="org-color">
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div>
</div>
<!-- <div class="item">
<div>最低</div>
<div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div>
</div> -->
</div>
</div> </div>
<el-drawer <el-drawer
custom-class="my-drawer" custom-class="my-drawer"
...@@ -437,99 +361,99 @@ ...@@ -437,99 +361,99 @@
<div class="right-data"> <div class="right-data">
<!-- 报名人数 --> <!-- 报名人数 -->
<div> <div>
<div class="tab pingfangR"><span>报名人数</span></div> <div class="tab pingfangR"><span>基本信息</span></div>
</div> </div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>5日平均</div> <div>能力值</div>
<div> <div>
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt=""> {{OutherData.SumScore}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>20日平均</div> <div>周冠</div>
<div> <div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.Capertion}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>60日平均</div> <div>年度交易额</div>
<div> <div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.YearTradeMoney}}
</div> </div>
</div> </div>
</div> </div>
<!-- 线路占比 --> <!-- 线路占比 -->
<div> <div>
<div class="tab pingfangR"><span>线路占比</span></div> <div class="tab pingfangR"><span>收客情况</span></div>
</div> </div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>30日平均</div> <div>月度</div>
<div> <div>
{{Math.round(day_line_statics[0].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt=""> {{OutherData.MonthClient}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>60日平均</div> <div>季度</div>
<div> <div>
{{Math.round(day_line_statics[1].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.QuarteClient}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>90日平均</div> <div>年度</div>
<div> <div>
{{Math.round(day_line_statics[2].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{OutherData.YearClient}}
</div> </div>
</div> </div>
</div> </div>
<!-- 报名单 --> <!-- 报名单 -->
<div> <div>
<div class="tab pingfangR"><span>报名单</span></div> <div class="tab pingfangR"><span>客户</span></div>
</div> </div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>当日</div> <div>客户数</div>
<div class="bl-color"> <div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}} {{OutherData.SumClient}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>5日平均</div> <div>激活数</div>
<div> <div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}} {{OutherData.ActiveClient}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>10日平均</div> <div>app客户</div>
<div> <div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}} {{OutherData.AppActiveClient}}
</div> </div>
</div> </div>
</div> </div>
<!-- 产品点击 --> <!-- 产品点击 -->
<div> <div>
<div class="tab pingfangR"><span>产品点击</span></div> <div class="tab pingfangR"><span>线路占比</span></div>
</div> </div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>当日</div> <div>{{OutherData.TopOneName}}</div>
<div class="pink-color"> <div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}} {{OutherData.TopOneCount}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>5日平均</div> <div>{{OutherData.TopTwoName}}</div>
<div> <div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}} {{OutherData.TopTwoCount}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>10日平均</div> <div>{{OutherData.TopThrName}}</div>
<div> <div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}} {{OutherData.TopThrCount}}
</div> </div>
</div> </div>
</div> </div>
...@@ -537,47 +461,23 @@ ...@@ -537,47 +461,23 @@
<div> <div>
<div class="tab pingfangR"><span>历史卖价</span></div> <div class="tab pingfangR"><span>历史卖价</span></div>
</div> </div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0"> <div class="item-box">
<div class="item"> <div class="item">
<div>最高</div> <div>最高</div>
<div class="red-color"> <div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span> {{OutherData.MaxTradeMoney}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>最低</div> <div>最低</div>
<div> <div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span> {{OutherData.MinTradeMoney}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>平均</div> <div>平均</div>
<div class="gree-color"> <div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span> {{OutherData.AvgTradeMoney}}
</div>
</div>
</div>
<!-- 成交量 -->
<div>
<div class="tab pingfangR"><span>成交量</span></div>
</div>
<div class="item-box" v-if="day_history_preferprice && day_history_preferprice.length > 0">
<div class="item">
<div>最高</div>
<div class="org-color">
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>最低</div>
<div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -585,23 +485,27 @@ ...@@ -585,23 +485,27 @@
</el-drawer> </el-drawer>
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<lineChart v-if="chartShow2" :zoom="zoom" :Development="Development" :Appointment="Appointment" :Demand="Demand" :SolveDemand="SolveDemand" :Clinch="Clinch" :Service="Service" :dateList="dateList" />
</el-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import lineChart from "./saleLineChart"; import lineChart from "./saleLineChart";
import saleLineChartK from "./saleLineChartK";
export default { export default {
components: { components: {
lineChart lineChart,
saleLineChartK,
}, },
data(){ data(){
return { return {
saleList: [],
drawer: false, drawer: false,
direction: 'rtl', direction: 'rtl',
rightShow: false, rightShow: false,
selectedRegion: [], selectedRegion: [],
navActive: 0,
options: [], options: [],
value: '', value: '',
value1: '', value1: '',
...@@ -615,6 +519,7 @@ export default { ...@@ -615,6 +519,7 @@ export default {
unitpriceList: [], unitpriceList: [],
dateList: [], dateList: [],
chartShow: false, chartShow: false,
chartShow2: false,
lineList: [], lineList: [],
prolineId: 0, prolineId: 0,
slineId: 0, slineId: 0,
...@@ -622,22 +527,32 @@ export default { ...@@ -622,22 +527,32 @@ export default {
day_order_statics: [], day_order_statics: [],
day_click_statics: [], day_click_statics: [],
day_history_preferprice: [], day_history_preferprice: [],
inquireList: [],
zoom: 1, zoom: 1,
day_line_statics: [], day_line_statics: [],
day_total_guestprice: {}, day_total_guestprice: {},
loding: false, loding: false,
outbranchid: -1, outbranchid: 0,
companyMsg:{ companyMsg:{
RB_Group_Id:'0', RB_Group_Id:'0',
Status:0, Status:0,
}, },
companyList: [], companyList: [],
RB_Branch_id: null,
saleId: 0,
Development: [], //名单开发
Appointment: [], // 约访
Demand: [], // 探寻需求
SolveDemand: [], // 解决需求
Clinch: [], // 说明成交
Service: [], // 售后服务
DaysKData: [], // k线图
dateList: [],
OutherData: {},
} }
}, },
watch: { watch: {
selectedRegion(nv) {
this.loadRegionChild(nv)
},
},created(){ },created(){
this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => { this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
...@@ -659,10 +574,15 @@ export default { ...@@ -659,10 +574,15 @@ export default {
this.StartTime = s2; this.StartTime = s2;
this.init() this.init()
this.getCompany() this.getCompany()
// setTimeout(() => { this.changeCP()
// this.init() this.getOutherData()
// }, 1000);
},methods:{ },methods:{
changeCP(){
this.apipost('user_post_get_allsaleemployee', {branchaId: this.outbranchid}, res => {
this.saleList = res.data.data
this.init()
})
},
getCompany(){ //公司 getCompany(){ //公司
this.apipost('admin_get_BranchGetList', {}, res => { this.apipost('admin_get_BranchGetList', {}, res => {
let data = res.data.data; let data = res.data.data;
...@@ -704,52 +624,54 @@ export default { ...@@ -704,52 +624,54 @@ export default {
} , } ,
init(){ init(){
this.loding = false; this.loding = false;
this.chartShow = false; this.chartShow2 = false;
let url='http://47.96.23.199:5001/api/order/get_single_data' this.getData()
let url2 = "http://47.96.23.199:5001/api/order/get_single_data_v2" this.getOutherData()
let msg={ },
startdate: this.StartTime, getDataList(list){
lineid: this.prolineId, let arr = []
ltid: this.slineId, list.map(x=>{
outbranchid: this.outbranchid arr.push(x.val)
})
return arr
},
getDateList(list){
let arr = []
list.map(x=>{
arr.push(x.key)
})
return arr
},
getData(){
this.apipost('user_post_get_salesixreporting', {branchId: this.outbranchid, empId: this.saleId}, res => {
if(res.data.resultCode === 1) {
let data = res.data.data
this.dateList = this.getDateList(data.development)
this.Development = this.getDataList(data.development) //名单开发
this.Appointment = this.getDataList(data.appointment) // 约访
this.Demand = this.getDataList(data.demand) // 探寻需求
this.SolveDemand = this.getDataList(data.solveDemand) // 解决需求
this.Clinch = this.getDataList(data.clinch) // 说明成交
this.Service = this.getDataList(data.service) // 售后服务
this.DaysKData = data.days // k线图
setTimeout(()=>{
this.chartShow2 = true;
this.loding = true;
}, 1000)
} }
this.getOutherData(url, msg) })
}, },
getOutherData: function (url, msg){ getOutherData: function (){
this.apiRequest(url,{msg:msg},r=>{ this.apipost('user_post_get_getsaletradereporting', {branchId: this.outbranchid, empId: this.saleId}, r=>{
if(r.data.resultCode==1){ if(r.data.resultCode==1){
let data = r.data.data; let data = r.data.data;
this.day_avg_num = data.day_avg_num this.OutherData = data
this.day_history_price = data.day_history_price
this.day_order_statics = data.day_order_statics
this.day_click_statics = data.day_click_statics
this.day_history_preferprice = data.day_history_preferprice
this.day_line_statics = data.day_line_statics
// 点击
this.clickcountList = data.day_guestprice.clickcountList
// 人数
this.guestnumList = data.day_guestprice.guestnumList
// 钱
this.unitpriceList = data.day_guestprice.unitpriceList
// 成交
this.preferpriceList = data.day_guestprice.preferpriceList
// 报名单
this.ordercountList = data.day_guestprice.ordercountList
// 时间
this.dateList = data.day_guestprice.dateList
// 合计
this.day_total_guestprice = data.day_total_guestprice[0]
this.chartShow = true;
this.$forceUpdate() this.$forceUpdate()
}else{ }else{
this.Error(r.data.message); this.Error(r.data.message);
} }
this.loding = true; this.loding = true;
}); });
},
setNavActive: function(n){
this.navActive = n
} }
} }
} }
......
...@@ -35,12 +35,12 @@ ...@@ -35,12 +35,12 @@
<script> <script>
export default { export default {
props:[ props:[
'preferpriceList', 'Development',
'guestnumList', 'Appointment',
'clickcountList', 'Demand',
'ordercountList', 'SolveDemand',
'unitpriceList', 'Clinch',
'day_total_guestprice', 'Service',
'dateList', 'dateList',
'zoom' 'zoom'
], ],
...@@ -52,6 +52,20 @@ export default { ...@@ -52,6 +52,20 @@ export default {
},mounted() { },mounted() {
this.init() this.init()
},methods:{ },methods:{
getDataList(list){
let arr = []
list.map(x=>{
arr.push(x.val)
})
return arr
},
getDateList(list){
let arr = []
list.map(x=>{
arr.push(x.key)
})
return arr
},
init() { init() {
let myChart = this.$echarts.init(this.$refs.myecharts); let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = []; var dataAxis = [];
...@@ -201,7 +215,7 @@ export default { ...@@ -201,7 +215,7 @@ export default {
yAxis : [ yAxis : [
{ {
gridIndex: 0, gridIndex: 0,
name : '名单开发 ¥'+ _this.day_total_guestprice.PreferPrice +'元', name : '名单开发',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -221,7 +235,7 @@ export default { ...@@ -221,7 +235,7 @@ export default {
}, },
{ {
gridIndex: 1, gridIndex: 1,
name : '约访 '+ _this.day_total_guestprice.OrderCount, name : '约访',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -241,7 +255,7 @@ export default { ...@@ -241,7 +255,7 @@ export default {
}, },
{ {
gridIndex: 2, gridIndex: 2,
name : '探寻需求 '+ _this.day_total_guestprice.GuestNum, name : '探寻需求',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -261,7 +275,7 @@ export default { ...@@ -261,7 +275,7 @@ export default {
}, },
{ {
gridIndex: 3, gridIndex: 3,
name : '解决需求 '+ _this.day_total_guestprice.GuestNum, name : '解决需求',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -281,7 +295,7 @@ export default { ...@@ -281,7 +295,7 @@ export default {
}, },
{ {
gridIndex: 4, gridIndex: 4,
name : '说明成交 '+ _this.day_total_guestprice.GuestNum, name : '说明成交',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -301,7 +315,7 @@ export default { ...@@ -301,7 +315,7 @@ export default {
}, },
{ {
gridIndex: 5, gridIndex: 5,
name : '售后服务 '+ _this.day_total_guestprice.ClickCount, name : '售后服务',
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -322,7 +336,7 @@ export default { ...@@ -322,7 +336,7 @@ export default {
], ],
series : [ series : [
{ {
name:'单开发', name:'单开发',
type:'line', type:'line',
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
...@@ -330,7 +344,7 @@ export default { ...@@ -330,7 +344,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.preferpriceList, data: _this.Development,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#F5AF19', color: '#F5AF19',
...@@ -362,7 +376,7 @@ export default { ...@@ -362,7 +376,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.ordercountList, data: _this.Appointment,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#3FD2F3', color: '#3FD2F3',
...@@ -394,7 +408,7 @@ export default { ...@@ -394,7 +408,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.guestnumList, data: _this.Demand,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#3FD2F3', color: '#3FD2F3',
...@@ -425,7 +439,7 @@ export default { ...@@ -425,7 +439,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.guestnumList, data: _this.SolveDemand,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: 'rgb(103, 230, 220)', color: 'rgb(103, 230, 220)',
...@@ -456,7 +470,7 @@ export default { ...@@ -456,7 +470,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.guestnumList, data: _this.Clinch,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#3FD2F3', color: '#3FD2F3',
...@@ -487,7 +501,7 @@ export default { ...@@ -487,7 +501,7 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.clickcountList, data: _this.Service,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#EE4454', color: '#EE4454',
......
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.PINGFANG{
font-family: "PINGFANG REGULAR";
}
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts" >
</div>
</template>
<script>
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
result.push(data[i].value[dayCount]);
}
return result;
}
export default {
props:[
'zoom',
'rightShow',
'DaysKData'
],
data(){
return {
myChart: null,
dataList: [],
dates: []
}
},watch:{
},created(){
},mounted() {
let data = this.DaysKData.map(function (item) {
return [
+item.BeginPrice,
+item.EndPrice,
+item.MinPrice,
+item.MaxPrice,
+item.Orders,
+item.AvgPrice,
];
});
var dates = this.DaysKData.map(function (item) {
return item.Day;
});
let dataList = []
for(let i = 0; i < data.length; i++) {
let obj = {
value: data[i],
// itemStyle: {
// normal: {
// color: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#D53C34',
// color0: i > data.length - 4 ? 'rgba(0, 0, 0, 0)' : '#43E9F3',
// borderColor: i > data.length - 4 ? '#6A6F81' : '#D53C34',
// borderColor0: i > data.length - 4 ? '#6A6F81' : '#43E9F3'
// }
// }
}
dataList.push(obj)
}
this.dataList = dataList
this.dates = dates
this.myChart = this.$echarts.init(this.$refs.myecharts);
this.init()
},methods:{
resize(){
this.myChart.resize()
},
init() {
// , '月均线', '季度均线', '黄金线'
var dataAxis = [];
let _this = this;
let option = {
backgroundColor: '#21202D',
color:['#2ecc71','#3498db','#9b59b6','#f1c40f','#e74c3c','#fffa65'],
legend: {
data: ['成交单价', '订单数', '平均价格'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
},
left: 100,
top: 10,
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
},
formatter: function (params) {
if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined
var res = "成交单价"
for(let i = 0; i < params.length; i ++) {
res += '<br/> '+ params[i].seriesName +': ' + params[i].value
}
// res += '<br/> 点击: ' + params[5].value
return res
} else {
var res = "成交单价"
res += '<br/> 开始值: ' + params[0].value[1]
res += '<br/> 结束值: ' + params[0].value[2]
res += '<br/> 最低值: ' + params[0].value[3]
res += '<br/> 最高值: ' + params[0].value[4]
res += '<br/> 订单数: ' + params[0].value[5]
res += '<br/> 平均价格: ' + params[0].value[6]
return res
}
},
},
xAxis: {
type: 'category',
data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
yAxis: [{
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
{
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#4a4a4a'
}
}
},
],
grid: [
{
bottom: 80,
left: 70,
right: 70,
},
],
dataZoom: [{
textStyle: {
color: '#8392A5'
},
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside',
}],
animation: false,
series: [
{
type: 'candlestick',
name: '成交单价',
data: _this.dataList,
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: '订单数',
type: 'line',
yAxisIndex: 1,
data: calculateMA(4, _this.dataList),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 1,
}
},
{
name: '平均价格',
type: 'line',
yAxisIndex: 0,
data: calculateMA(5, _this.dataList),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 1,
}
},
]
}
_this.myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
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