Skip to content

M
Muse
Commit 67247df6 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

销售统计

parent 2c383fd7
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 249 deletions
src/components/viitto/lineChart.vue
View file @ 67247df6
......@@ -112,22 +112,22 @@ export default {
},
grid: [{
left: 80,
left: 40,
right: 10,
top: '5%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '28%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '51%',
height: '16%'
}, {
left: 80,
left: 40,
right: 10,
top: '74%',
height: '16%'
......
src/components/viitto/lineChart2.vue
View file @ 67247df6
......@@ -112,27 +112,27 @@ export default {
},
grid: [{
left: 80,
left: 40,
right: 10,
top: '40px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '250px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '460px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '670px',
height: '150px'
}, {
left: 80,
left: 40,
right: 10,
top: '880px',
height: '150px'
......
src/components/viitto/lineChartK.vue
View file @ 67247df6
......@@ -123,11 +123,9 @@ export default {
formatter: function (params) {
if (typeof(params[0].value) !== "object") {// 防止放上去提示undefined
var res = "成交单价"
res += '<br/> 5日平均: ' + params[0].value
res += '<br/> 10日平均: ' + params[1].value
res += '<br/> 30日平均: ' + params[2].value
res += '<br/> 90日平均: ' + params[3].value
res += '<br/> 180日平均: ' + params[4].value
for(let i = 0; i < params.length; i ++) {
res += '<br/> '+ params[i].seriesName +': ' + params[i].value
}
// res += '<br/> 点击: ' + params[5].value
return res
} else {
......
src/components/viitto/saleDataLook.vue
View file @ 67247df6
......@@ -242,8 +242,7 @@
<div class="xilie">
<div>公司</div>
<div>
<el-select v-model="outbranchid" placeholder="请选择" @change="init" popper-class="company-class">
<el-option label="不限" :value="-1"></el-option>
<el-select v-model="outbranchid" placeholder="请选择" @change="changeCP" popper-class="company-class">
<el-option
v-for="item in companyList"
:key="item.Id"
......@@ -257,9 +256,19 @@
<el-col :span="8">
<div class="xilie">
<div>销售</div>
<div>
<el-cascader class="width-100" :options="lineList" :props="{ checkStrictly: true }" v-model="selectedRegion" change-on-select/>
</div>
<el-select v-model="saleId" placeholder="请选择" @change="init" popper-class="company-class">
<el-option
: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>
</el-col>
</el-row>
......@@ -272,7 +281,7 @@
<div class="content" >
<el-row :gutter="40" style="margin-bottom: 20px;">
<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 :span="2" style="position: relative;">
<div class="open-btn" @click="drawer = true">
......@@ -282,151 +291,66 @@
<div class="right-data">
<!-- 报名人数 -->
<div>
<div class="tab pingfangR"><span>报名人数</span></div>
<div class="tab pingfangR"><span>基本信息</span></div>
</div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0">
<div class="item-box">
<div class="item">
<div>5日平均</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>
<div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
{{OutherData.SumScore}}
</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 class="tab pingfangR"><span>线路占比</span></div>
<div class="tab pingfangR"><span>收客情况</span></div>
</div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<div class="item-box">
<div class="item">
<div>30日平均</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>
<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 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 class="tab pingfangR"><span>报名单</span></div>
<div class="tab pingfangR"><span>客户</span></div>
</div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0">
<div class="item-box">
<div class="item">
<div>当日</div>
<div>客户数</div>
<div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
{{OutherData.SumClient}}
</div>
</div>
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div>
</div> -->
</div>
<!-- 产品点击 -->
<div>
<div class="tab pingfangR"><span>产品点击</span></div>
<div class="tab pingfangR"><span>线路占比</span></div>
</div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item-box">
<div class="item">
<div>当日</div>
<div>{{OutherData.TopOneName}}</div>
<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 class="item">
<div>10日平均</div>
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div>
</div> -->
</div>
<!-- 历史卖价 -->
<div>
<div class="tab pingfangR"><span>历史卖价</span></div>
</div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0">
<div class="item-box">
<div class="item">
<div>最高</div>
<div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<!-- <div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
</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>
{{OutherData.MaxTradeMoney}}<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>
<el-drawer
custom-class="my-drawer"
......@@ -437,99 +361,99 @@
<div class="right-data">
<!-- 报名人数 -->
<div>
<div class="tab pingfangR"><span>报名人数</span></div>
<div class="tab pingfangR"><span>基本信息</span></div>
</div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0">
<div class="item-box">
<div class="item">
<div>5日平均</div>
<div>能力值</div>
<div>
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
{{OutherData.SumScore}}
</div>
</div>
<div class="item">
<div>20日平均</div>
<div>周冠</div>
<div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
{{OutherData.Capertion}}
</div>
</div>
<div class="item">
<div>60日平均</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 class="tab pingfangR"><span>线路占比</span></div>
<div class="tab pingfangR"><span>收客情况</span></div>
</div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<div class="item-box">
<div class="item">
<div>30日平均</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 class="item">
<div>60日平均</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 class="item">
<div>90日平均</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 class="tab pingfangR"><span>报名单</span></div>
<div class="tab pingfangR"><span>客户</span></div>
</div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0">
<div class="item-box">
<div class="item">
<div>当日</div>
<div>客户数</div>
<div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
{{OutherData.SumClient}}
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>激活数</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
{{OutherData.ActiveClient}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>app客户</div>
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
{{OutherData.AppActiveClient}}
</div>
</div>
</div>
<!-- 产品点击 -->
<div>
<div class="tab pingfangR"><span>产品点击</span></div>
<div class="tab pingfangR"><span>线路占比</span></div>
</div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item-box">
<div class="item">
<div>当日</div>
<div>{{OutherData.TopOneName}}</div>
<div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}}
{{OutherData.TopOneCount}}
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>{{OutherData.TopTwoName}}</div>
<div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}}
{{OutherData.TopTwoCount}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>{{OutherData.TopThrName}}</div>
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
{{OutherData.TopThrCount}}
</div>
</div>
</div>
......@@ -537,47 +461,23 @@
<div>
<div class="tab pingfangR"><span>历史卖价</span></div>
</div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0">
<div class="item-box">
<div class="item">
<div>最高</div>
<div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
{{OutherData.MaxTradeMoney}}
</div>
</div>
<div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
{{OutherData.MinTradeMoney}}
</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>
{{OutherData.AvgTradeMoney}}
</div>
</div>
</div>
......@@ -585,23 +485,27 @@
</el-drawer>
</el-col>
</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>
</template>
<script>
import lineChart from "./saleLineChart";
import saleLineChartK from "./saleLineChartK";
export default {
components: {
lineChart
lineChart,
saleLineChartK,
},
data(){
return {
saleList: [],
drawer: false,
direction: 'rtl',
rightShow: false,
selectedRegion: [],
navActive: 0,
options: [],
value: '',
value1: '',
......@@ -615,6 +519,7 @@ export default {
unitpriceList: [],
dateList: [],
chartShow: false,
chartShow2: false,
lineList: [],
prolineId: 0,
slineId: 0,
......@@ -622,22 +527,32 @@ export default {
day_order_statics: [],
day_click_statics: [],
day_history_preferprice: [],
inquireList: [],
zoom: 1,
day_line_statics: [],
day_total_guestprice: {},
loding: false,
outbranchid: -1,
outbranchid: 0,
companyMsg:{
RB_Group_Id:'0',
Status:0,
},
companyList: [],
RB_Branch_id: null,
saleId: 0,
Development: [], //名单开发
Appointment: [], // 约访
Demand: [], // 探寻需求
SolveDemand: [], // 解决需求
Clinch: [], // 说明成交
Service: [], // 售后服务
DaysKData: [], // k线图
dateList: [],
OutherData: {},
}
},
watch: {
selectedRegion(nv) {
this.loadRegionChild(nv)
},
},created(){
this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
if (res.data.resultCode == 1) {
......@@ -659,10 +574,15 @@ export default {
this.StartTime = s2;
this.init()
this.getCompany()
// setTimeout(() => {
// this.init()
// }, 1000);
this.changeCP()
this.getOutherData()
},methods:{
changeCP(){
this.apipost('user_post_get_allsaleemployee', {branchaId: this.outbranchid}, res => {
this.saleList = res.data.data
this.init()
})
},
getCompany(){ //公司
this.apipost('admin_get_BranchGetList', {}, res => {
let data = res.data.data;
......@@ -704,52 +624,54 @@ export default {
} ,
init(){
this.loding = false;
this.chartShow = false;
let url='http://47.96.23.199:5001/api/order/get_single_data'
let url2 = "http://47.96.23.199:5001/api/order/get_single_data_v2"
let msg={
startdate: this.StartTime,
lineid: this.prolineId,
ltid: this.slineId,
outbranchid: this.outbranchid
}
this.getOutherData(url, msg)
this.chartShow2 = false;
this.getData()
this.getOutherData()
},
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
},
getOutherData: function (url, msg){
this.apiRequest(url,{msg:msg},r=>{
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)
}
})
},
getOutherData: function (){
this.apipost('user_post_get_getsaletradereporting', {branchId: this.outbranchid, empId: this.saleId}, r=>{
if(r.data.resultCode==1){
let data = r.data.data;
this.day_avg_num = data.day_avg_num
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.OutherData = data
this.$forceUpdate()
}else{
this.Error(r.data.message);
}
this.loding = true;
});
},
setNavActive: function(n){
this.navActive = n
}
}
}
......
src/components/viitto/saleLineChart.vue
View file @ 67247df6
......@@ -35,12 +35,12 @@
<script>
export default {
props:[
'preferpriceList',
'guestnumList',
'clickcountList',
'ordercountList',
'unitpriceList',
'day_total_guestprice',
'Development',
'Appointment',
'Demand',
'SolveDemand',
'Clinch',
'Service',
'dateList',
'zoom'
],
......@@ -52,6 +52,20 @@ export default {
},mounted() {
this.init()
},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() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
......@@ -201,7 +215,7 @@ export default {
yAxis : [
{
gridIndex: 0,
name : '名单开发 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
name : '名单开发',
type : 'value',
inverse: false,
splitLine: {
......@@ -221,7 +235,7 @@ export default {
},
{
gridIndex: 1,
name : '约访 '+ _this.day_total_guestprice.OrderCount,
name : '约访',
type : 'value',
inverse: false,
splitLine: {
......@@ -241,7 +255,7 @@ export default {
},
{
gridIndex: 2,
name : '探寻需求 '+ _this.day_total_guestprice.GuestNum,
name : '探寻需求',
type : 'value',
inverse: false,
splitLine: {
......@@ -261,7 +275,7 @@ export default {
},
{
gridIndex: 3,
name : '解决需求 '+ _this.day_total_guestprice.GuestNum,
name : '解决需求',
type : 'value',
inverse: false,
splitLine: {
......@@ -281,7 +295,7 @@ export default {
},
{
gridIndex: 4,
name : '说明成交 '+ _this.day_total_guestprice.GuestNum,
name : '说明成交',
type : 'value',
inverse: false,
splitLine: {
......@@ -301,7 +315,7 @@ export default {
},
{
gridIndex: 5,
name : '售后服务 '+ _this.day_total_guestprice.ClickCount,
name : '售后服务',
type : 'value',
inverse: false,
splitLine: {
......@@ -322,7 +336,7 @@ export default {
],
series : [
{
name:'明单开发',
name:'名单开发',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
......@@ -330,7 +344,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.preferpriceList,
data: _this.Development,
itemStyle: {
borderWidth: 2,
color: '#F5AF19',
......@@ -362,7 +376,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.ordercountList,
data: _this.Appointment,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -394,7 +408,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.Demand,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -425,7 +439,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.SolveDemand,
itemStyle: {
borderWidth: 2,
color: 'rgb(103, 230, 220)',
......@@ -456,7 +470,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
data: _this.Clinch,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
......@@ -487,7 +501,7 @@ export default {
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.clickcountList,
data: _this.Service,
itemStyle: {
borderWidth: 2,
color: '#EE4454',
......
src/components/viitto/saleLineChartK.vue 0 → 100644
View file @ 67247df6
<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