Skip to content

M
Muse
Commit 126f40e0 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 516cfe58
Show whitespace changes
Inline Side-by-side
Showing with 463 additions and 296 deletions
src/components/viitto/dataLook.vue
View file @ 126f40e0
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
text-align: right; text-align: right;
font-family: 'pingfangR'; font-family: 'pingfangR';
} }
.pingfangR{
font-family: 'pingfangR';
}
.type-box>div{ .type-box>div{
background:rgba(19,25,44,1); background:rgba(19,25,44,1);
box-shadow:0px 0px 5px 0px rgba(2,3,6, .55); box-shadow:0px 0px 5px 0px rgba(2,3,6, .55);
...@@ -67,7 +70,8 @@ ...@@ -67,7 +70,8 @@
border: none !important; border: none !important;
} }
.content{ .content{
height: calc(100vh - 122px); height: 88%;
/* height: calc(100vh - 122px); */
padding: 30px 40px; padding: 30px 40px;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -82,23 +86,21 @@ ...@@ -82,23 +86,21 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.right-data::-webkit-scrollbar{ .right-data::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 0; width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
height: 0; height: 47px;
} }
.right-data::-webkit-scrollbar-thumb { .right-data::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ /*滚动条里面小方块*/
border-radius: 0; border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background: rgba(106,116,146, .35);
background: #c9c9c9;
} }
.right-data::-webkit-scrollbar-track { .right-data::-webkit-scrollbar-track {
/*滚动条里面轨道*/ /*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); border-radius: 4px;
border-radius: 0; background: #252D48;
background: #EDEDED;
} }
.tab span{ .tab span{
display: inline-block; display: inline-block;
...@@ -166,14 +168,17 @@ ...@@ -166,14 +168,17 @@
.sub{ .sub{
font-size: 20px; font-size: 20px;
} }
.width-100{
width: 100%;
}
</style> </style>
<template> <template>
<div class="dataLook"> <div class="dataLook" v-loading="!loding">
<div class="nav"> <div class="nav">
<el-row :gutter="70"> <el-row :gutter="70">
<el-col :span="18"> <el-col :span="18">
<el-row :gutter="70"> <el-row :gutter="70">
<el-col :span="8" class="type-box"> <el-col :span="12" class="type-box">
<div> <div>
<div class="danris " :class="{active: navActive == 0 ? 'active' : ''}" @click="setNavActive(0)"> <div class="danris " :class="{active: navActive == 0 ? 'active' : ''}" @click="setNavActive(0)">
单日数据展示图 单日数据展示图
...@@ -187,71 +192,65 @@ ...@@ -187,71 +192,65 @@
<div class="xilie"> <div class="xilie">
<div>系列</div> <div>系列</div>
<div> <div>
<el-select v-model="value" filterable placeholder="请选择"> <el-cascader class="width-100" :options="lineList" :props="{ checkStrictly: true }" v-model="selectedRegion" change-on-select/>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <!-- <el-col :span="8">
<div class="xilie"> <div class="xilie">
<div>年度</div> <div>年度</div>
<div> <div>
<el-date-picker <el-date-picker
@change="init" @change="init"
v-model="StartTime" v-model="StartTime"
value-format="yyyy-MM-dd"
type="date" type="date"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
</el-col> </el-col> -->
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="6" class="name"> <el-col :span="6" class="name">
微途科技数据看板 印象之旅线路看板
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="content"> <div class="content">
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :span="16"> <el-col :span="16">
<lineChart /> <lineChart v-if="chartShow" :zoom="zoom" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="right-data"> <div class="right-data">
<!-- 报名人数 --> <!-- 报名人数 -->
<div> <div>
<div class="tab"><span>报名人数</span></div> <div class="tab pingfangR"><span>报名人数</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_avg_num && day_avg_num.length > 0">
<div class="item"> <div class="item">
<div>5日平均</div> <div>5日平均</div>
<div> <div>
39 <img src="../../assets/img/viitto/lvsedian.png" alt=""> {{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>10日平均</div> <div>10日平均</div>
<div> <div>
40 <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{Math.round(day_avg_num[1].OrderAvgCount* 100) / 100}}{{day_avg_num[1].OrderAvgCount}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div> </div>
</div> -->
<div class="item"> <div class="item">
<div>20日平均</div> <div>20日平均</div>
<div> <div>
32 <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>60日平均</div> <div>60日平均</div>
<div> <div>
28 <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div>
</div> </div>
...@@ -260,129 +259,129 @@ ...@@ -260,129 +259,129 @@
<!-- 线路占比 --> <!-- 线路占比 -->
<div> <div>
<div class="tab"><span>线路占比</span></div> <div class="tab pingfangR"><span>线路占比</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<div class="item"> <div class="item">
<div>30日平均</div> <div>30日平均</div>
<div> <div>
39<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt=""> {{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>60日平均</div> <div>60日平均</div>
<div> <div>
40<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>90日平均</div> <div>90日平均</div>
<div> <div>
32<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>180日平均</div> <div>180日平均</div>
<div> <div>
28<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{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>
<div class="tab"><span>报名单</span></div> <div class="tab pingfangR"><span>报名单</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_order_statics && day_order_statics.length > 0">
<div class="item"> <div class="item">
<div>当日</div> <div>当日</div>
<div class="bl-color"> <div class="bl-color">
39 {{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>5日平均</div> <div>5日平均</div>
<div> <div>
40 {{(day_order_statics[1].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>10日平均</div> <div>10日平均</div>
<div> <div>
32 {{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div>
</div> </div>
<!-- 产品点击 --> <!-- 产品点击 -->
<div> <div>
<div class="tab"><span>产品点击</span></div> <div class="tab pingfangR"><span>产品点击</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item"> <div class="item">
<div>当日</div> <div>当日</div>
<div class="pink-color"> <div class="pink-color">
39 {{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>5日平均</div> <div>5日平均</div>
<div> <div>
40 {{(day_click_statics[1].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>10日平均</div> <div>10日平均</div>
<div> <div>
32 {{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div>
</div> </div>
<!-- 历史卖价 --> <!-- 历史卖价 -->
<div> <div>
<div class="tab"><span>历史卖价</span></div> <div class="tab pingfangR"><span>历史卖价</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_history_price && day_history_price.length > 0">
<div class="item"> <div class="item">
<div>最高</div> <div>最高</div>
<div class="red-color"> <div class="red-color">
12896.<span class="sub">00</span> {{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>最低</div> <div>最低</div>
<div> <div>
98688.<span class="sub">00</span> {{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>平均</div> <div>平均</div>
<div class="gree-color"> <div class="gree-color">
10228.<span class="sub">00</span> {{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div> </div>
</div> </div>
<!-- 成交量 --> <!-- 成交量 -->
<div> <div>
<div class="tab"><span>成交量</span></div> <div class="tab pingfangR"><span>成交量</span></div>
</div> </div>
<div class="item-box"> <div class="item-box" v-if="day_history_preferprice && day_history_preferprice.length > 0">
<div class="item"> <div class="item">
<div>最高</div> <div>最高</div>
<div class="org-color"> <div class="org-color">
12896.<span class="sub">00</span> {{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>最低</div> <div>最低</div>
<div> <div>
98688.<span class="sub">00</span> {{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div>平均</div> <div>平均</div>
<div> <div>
10228.<span class="sub">00</span> {{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -401,33 +400,138 @@ export default { ...@@ -401,33 +400,138 @@ export default {
}, },
data(){ data(){
return { return {
selectedRegion: [],
navActive: 0, navActive: 0,
options: [], options: [],
value: '', value: '',
value1: '', value1: '',
StartTime: '' StartTime: '',
day_avg_num: [],
day_history_price: [{}],
clickcountList: [],
guestnumList: [],
preferpriceList: [],
ordercountList: [],
unitpriceList: [],
dateList: [],
chartShow: false,
lineList: [],
prolineId: 0,
slineId: 0,
LineTeamList: [],
day_order_statics: [],
day_click_statics: [],
day_history_preferprice: [],
zoom: 1,
day_line_statics: [],
day_total_guestprice: {},
loding: false,
}
},
watch: {
selectedRegion(nv) {
this.loadRegionChild(nv)
},
},created(){
this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
data.map(x=>{
x.label = x.LineName,
x.value = x.LineID,
x.children = []
})
this.lineList = data
} }
});
},mounted() { },mounted() {
let nowDay = new Date().toLocaleDateString(); let Height = window.innerHeight
this.StartTime = nowDay; this.zoom = Math.round((Height/1080) * 100) / 100
var day2 = new Date();
day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
this.StartTime = s2;
this.init() this.init()
// setTimeout(() => { // setTimeout(() => {
// this.init() // this.init()
// }, 1000); // }, 1000);
},methods:{ },methods:{
loadRegionChild(regionIdArr) {
let lineId = 0,
slineId = 0;
if (regionIdArr.length == 1) {
lineId = regionIdArr[0]
} else {
slineId = regionIdArr[1]
}
if (this.prolineId == lineId) {
return
}
this.prolineId = lineId
this.slineId = slineId
this.init()
this.apipost("team_post_GetList", {
lineID: lineId,
isTOOP: 1
}, res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
data.map(x=>{
x.value = x.LtID
x.label = x.LtName
})
this.lineList.map(x=>{
if (x.value == lineId) {
x.children = data
}
})
}
});
} ,
init(){ init(){
this.loding = false;
this.chartShow = false;
let url='http://47.96.23.199:5001/api/order/get_single_data' let url='http://47.96.23.199:5001/api/order/get_single_data'
let msg={ let msg={
startdate: this.StartTime, startdate: this.StartTime,
lineid: 0, lineid: this.prolineId,
ltid: 0 ltid: this.slineId
} }
this.apiRequest(url,msg,r=>{ this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){ if(r.data.resultCode==1){
console.log(r) 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.$forceUpdate()
}else{ }else{
this.Error(r.data.message); this.Error(r.data.message);
} }
this.loding = true;
}); });
}, },
setNavActive: function(n){ setNavActive: function(n){
......
src/components/viitto/lineChart.vue
View file @ 126f40e0
...@@ -25,26 +25,43 @@ ...@@ -25,26 +25,43 @@
} }
</style> </style>
<template> <template>
<div class="myecharts" ref="myecharts"> <div class="myecharts" ref="myecharts" >
</div> </div>
</template> </template>
<script> <script>
let timeData = ['2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'] let preferpriceList = [],guestnumList = [],clickcountList = [],ordercountList = [],unitpriceList = [],day_total_guestprice = [],dateList = [];
let myChart = null
export default { export default {
components: { props:[
'preferpriceList',
}, 'guestnumList',
'clickcountList',
'ordercountList',
'unitpriceList',
'day_total_guestprice',
'dateList',
'zoom'
],
data(){ data(){
return { return {
} }
},created(){
},mounted() { },mounted() {
myChart = this.$echarts.init(this.$refs.myecharts);
preferpriceList = this.preferpriceList
guestnumList = this.guestnumList
clickcountList = this.clickcountList
ordercountList = this.ordercountList
unitpriceList = this.unitpriceList
day_total_guestprice = this.day_total_guestprice
dateList = this.dateList
this.init() this.init()
},methods:{ },methods:{
init() { init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = []; var dataAxis = [];
let _this = this;
let option = { let option = {
textStyle: { textStyle: {
fontFamily: 'PINGFANG REGULAR', fontFamily: 'PINGFANG REGULAR',
...@@ -65,7 +82,39 @@ export default { ...@@ -65,7 +82,39 @@ export default {
backgroundColor: '#E62382', backgroundColor: '#E62382',
confine: true, confine: true,
}, },
dataZoom: [
{
show: true,
realtime: true,
start: 99,
end: 100,
xAxisIndex: [0, 1],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
},
{
type: 'inside',
realtime: true,
start: 99,
end: 100,
xAxisIndex: [0, 1],
bottom: 0,
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
}
],
axisPointer: { axisPointer: {
snap: true, snap: true,
link: {xAxisIndex: 'all'} link: {xAxisIndex: 'all'}
...@@ -74,70 +123,77 @@ export default { ...@@ -74,70 +123,77 @@ export default {
grid: [{ grid: [{
left: 50, left: 50,
right: 50, right: 50,
height: '17%' // height: '17%'
}, { }
left: 50, // , {
right: 50, // left: 50,
top: '31%', // right: 50,
height: '17%' // top: '31%',
}, { // height: '17%'
left: 50, // }, {
right: 50, // left: 50,
top: '55%', // right: 50,
height: '17%' // top: '55%',
}, { // height: '17%'
left: 50, // }, {
right: 50, // left: 50,
top: '80%', // right: 50,
height: '17%' // top: '80%',
}], // height: '17%'
// }
],
xAxis : [ xAxis : [
{ {
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: timeData, data: dateList,
"show": false, // "show": false,
axisLabel: {
color: '#fff',
formatter: function (value, index) {
return value.substring(0, 10);
}
}, },
{
type : 'category',
boundaryGap : false,
data: timeData,
"show": false,
}, },
{ {
gridIndex: 1,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: timeData, data: dateList,
position: 'bottom',
"show": false
},
{
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom',
"show": false, "show": false,
}, },
{ // {
gridIndex: 3, // gridIndex: 1,
type : 'category', // type : 'category',
boundaryGap : false, // boundaryGap : false,
data: timeData, // data: _this.dateList,
position: 'bottom', // position: 'bottom',
"show": true, // "show": false
axisLabel: { // },
color: '#fff', // {
}, // gridIndex: 2,
} // type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": false,
// },
// {
// gridIndex: 3,
// type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": true,
// axisLabel: {
// color: '#fff',
// },
// }
], ],
yAxis : [ yAxis : [
{ {
gridIndex: 0, gridIndex: 0,
name : '人数 5人', name : '人数 '+ _this.day_total_guestprice.GuestNum +'人',
type : 'value', type : 'value',
max : 100,
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#30374E', color: '#30374E',
...@@ -158,7 +214,6 @@ export default { ...@@ -158,7 +214,6 @@ export default {
name : '价格', name : '价格',
type : 'value', type : 'value',
position: 'right', position: 'right',
max : 59999,
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {
...@@ -175,66 +230,66 @@ export default { ...@@ -175,66 +230,66 @@ export default {
color: '#12BBFF', color: '#12BBFF',
}, },
}, },
{ // {
gridIndex: 1, // gridIndex: 1,
name : '成交总量 ￥688.55元', // name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
type : 'value', // type : 'value',
inverse: false, // inverse: false,
splitLine: { // splitLine: {
lineStyle: { // lineStyle: {
color: '#30374E', // color: '#30374E',
type: 'dashed' // type: 'dashed'
} // }
}, // },
nameTextStyle: { // nameTextStyle: {
color: '#ffffff', // color: '#ffffff',
padding: [0, 0, 0, 160], // padding: [0, 0, 0, 160],
fontSize: 18 // fontSize: 18
}, // },
axisLabel: { // axisLabel: {
color: '#F5AF19', // color: '#F5AF19',
} // }
}, // },
{ // {
gridIndex: 2, // gridIndex: 2,
name : '报名单数 88', // name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
type : 'value', // type : 'value',
inverse: false, // inverse: false,
splitLine: { // splitLine: {
lineStyle: { // lineStyle: {
color: '#30374E', // color: '#30374E',
type: 'dashed' // type: 'dashed'
} // }
}, // },
nameTextStyle: { // nameTextStyle: {
color: '#ffffff', // color: '#ffffff',
padding: [0, 0, 0, 80], // padding: [0, 0, 0, 80],
fontSize: 18 // fontSize: 18
}, // },
axisLabel: { // axisLabel: {
color: '#3FD2F3', // color: '#3FD2F3',
} // }
}, // },
{ // {
gridIndex: 3, // gridIndex: 3,
name : '产品点击 1699', // name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
type : 'value', // type : 'value',
inverse: false, // inverse: false,
splitLine: { // splitLine: {
lineStyle: { // lineStyle: {
color: '#30374E', // color: '#30374E',
type: 'dashed' // type: 'dashed'
} // }
}, // },
nameTextStyle: { // nameTextStyle: {
color: '#ffffff', // color: '#ffffff',
padding: [10, 0, 0, 110], // padding: [10, 0, 0, 110],
fontSize: 18 // fontSize: 18
}, // },
axisLabel: { // axisLabel: {
color: '#EE4454', // color: '#EE4454',
} // }
} // }
], ],
series : [ series : [
{ {
...@@ -246,18 +301,19 @@ export default { ...@@ -246,18 +301,19 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data:[4,15,20,29,5,18,12,23,26,10,21], data: guestnumList,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#0F56FF', color: '#0F56FF',
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
}, },
sampling: 'average',
lineStyle: { lineStyle: {
color: "#12BBFF", color: "#12BBFF",
shadowBlur: 10, shadowBlur: 0,
width: 5, width: 2,
shadowColor: "#0F56FF" // shadowColor: "#0F56FF"
}, },
areaStyle: { areaStyle: {
normal: { normal: {
...@@ -281,7 +337,8 @@ export default { ...@@ -281,7 +337,8 @@ export default {
smooth: true, smooth: true,
// symbol: 'none', // symbol: 'none',
showSymbol: false, showSymbol: false,
data:[5,15.02,4,45,1988.95,15888.65,888.66,666,5466.88,1536,1235,2334.56], data: unitpriceList,
sampling: 'average',
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#44D6AC', color: '#44D6AC',
...@@ -290,9 +347,9 @@ export default { ...@@ -290,9 +347,9 @@ export default {
}, },
lineStyle: { lineStyle: {
color: "#A7DE8A", color: "#A7DE8A",
shadowBlur: 10, shadowBlur: 0,
width: 5, width: 2,
shadowColor: "#44D6AC" // shadowColor: "#44D6AC"
}, },
areaStyle: { areaStyle: {
normal: { normal: {
...@@ -303,101 +360,101 @@ export default { ...@@ -303,101 +360,101 @@ export default {
} }
}, },
}, },
{ // {
name:'成交总量', // name:'成交总量',
type:'line', // type:'line',
xAxisIndex: 2, // xAxisIndex: 2,
yAxisIndex: 2, // yAxisIndex: 2,
symbolSize: 2, // symbolSize: 2,
hoverAnimation: true, // hoverAnimation: true,
smooth: true, // smooth: true,
showSymbol: false, // showSymbol: false,
data: [23,88,12,45,26,33,24,26,28,26,29], // data: _this.preferpriceList,
itemStyle: { // itemStyle: {
borderWidth: 2, // borderWidth: 2,
color: '#F5AF19', // color: '#F5AF19',
shadowBlur: 10, // shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)' // shadowColor: 'rgba(255,250,0,1)'
}, // },
lineStyle: { // lineStyle: {
color: "#F5AF19", // color: "#F5AF19",
shadowBlur: 10, // shadowBlur: 10,
width: 5, // width: 5,
shadowColor: "#F5AF19" // shadowColor: "#F5AF19"
}, // },
areaStyle: { // areaStyle: {
normal: { // normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(245,175,25,1)" }, // { offset: 0, color: "rgba(245,175,25,1)" },
{ offset: 1, color: "rgba(245,175,25,0)" } // { offset: 1, color: "rgba(245,175,25,0)" }
]) // ])
} // }
}, // },
} // }
, // ,
{ // {
name:'报名单数', // name:'报名单数',
type:'line', // type:'line',
xAxisIndex: 3, // xAxisIndex: 3,
yAxisIndex: 3, // yAxisIndex: 3,
symbolSize: 2, // symbolSize: 2,
hoverAnimation: true, // hoverAnimation: true,
smooth: true, // smooth: true,
showSymbol: false, // showSymbol: false,
data: [8,5,6,7,11,2,6,8,4,5,5], // data: _this.ordercountList,
itemStyle: { // itemStyle: {
borderWidth: 2, // borderWidth: 2,
color: '#3FD2F3', // color: '#3FD2F3',
shadowBlur: 10, // shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)' // shadowColor: 'rgba(255,250,0,1)'
}, // },
lineStyle: { // lineStyle: {
color: "#9345F8", // color: "#9345F8",
shadowBlur: 10, // shadowBlur: 10,
width: 5, // width: 5,
shadowColor: "#3FD2F3" // shadowColor: "#3FD2F3"
}, // },
areaStyle: { // areaStyle: {
normal: { // normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(147,69,248,1)" }, // { offset: 0, color: "rgba(147,69,248,1)" },
{ offset: 1, color: "rgba(147,69,248,0)" } // { offset: 1, color: "rgba(147,69,248,0)" }
]) // ])
} // }
}, // },
} // }
, // ,
{ // {
name:'产品点击', // name:'产品点击',
type:'line', // type:'line',
xAxisIndex: 4, // xAxisIndex: 4,
yAxisIndex: 4, // yAxisIndex: 4,
symbolSize: 2, // symbolSize: 2,
hoverAnimation: true, // hoverAnimation: true,
smooth: true, // smooth: true,
showSymbol: false, // showSymbol: false,
data: [67,96,33,108,222,68,156,263,108,123,12], // data: _this.clickcountList,
itemStyle: { // itemStyle: {
borderWidth: 2, // borderWidth: 2,
color: '#EE4454', // color: '#EE4454',
shadowBlur: 10, // shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)' // shadowColor: 'rgba(255,250,0,1)'
}, // },
lineStyle: { // lineStyle: {
color: "#FFAA85", // color: "#FFAA85",
width: 5, // width: 5,
shadowBlur: 10, // shadowBlur: 10,
shadowColor: "#EE4454" // shadowColor: "#EE4454"
}, // },
areaStyle: { // areaStyle: {
normal: { // normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(239,71,86,1)" }, // { offset: 0, color: "rgba(239,71,86,1)" },
{ offset: 1, color: "rgba(239,71,86,0)" } // { offset: 1, color: "rgba(239,71,86,0)" }
]) // ])
} // }
}, // },
} // }
] ]
} }
myChart.setOption(option); myChart.setOption(option);
......
src/components/viitto/viittoData.vue
View file @ 126f40e0
...@@ -290,7 +290,7 @@ ul li { ...@@ -290,7 +290,7 @@ ul li {
</style> </style>
<template> <template>
<div class="viittoData" v-if="dataList"> <div class="viittoData" v-if="dataList" :style="{zoom: zoom}">
<div class="content-box" style="width:96%;margin:0 auto"> <div class="content-box" style="width:96%;margin:0 auto">
<el-col :span="7"> <el-col :span="7">
<el-row class="left-top"> <el-row class="left-top">
...@@ -416,9 +416,12 @@ export default { ...@@ -416,9 +416,12 @@ export default {
dataList: null, dataList: null,
//标点 //标点
dataArea:[], dataArea:[],
num:1 num:1,
zoom: 1,
} }
},mounted() { },mounted() {
let Height = window.innerHeight
this.zoom = Math.round((Height/1080) * 100) / 100
this.init(); this.init();
setTimeout(() => { setTimeout(() => {
this.connec(); this.connec();
......
src/components/viitto/viittoData2.vue
View file @ 126f40e0
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
} }
</style> </style>
<template> <template>
<div class="viittoData2"> <div class="viittoData2" :style="{zoom: zoom}">
<el-row class="viittoRow"> <el-row class="viittoRow">
<el-col :span="5"> <el-col :span="5">
<div class="clearfix" style="visibility:hidden"> <div class="clearfix" style="visibility:hidden">
...@@ -356,10 +356,13 @@ export default { ...@@ -356,10 +356,13 @@ export default {
//传递子组件活跃用户 //传递子组件活跃用户
ActiveArr:[], ActiveArr:[],
//传递不活跃用户 //传递不活跃用户
InActiveArr:[] InActiveArr:[],
zoom: 1
}; };
}, },
mounted() { mounted() {
let Height = window.innerHeight
this.zoom = Math.round((Height/1080) * 100) / 100
this.getB2BAddress(); this.getB2BAddress();
this.getdata(); this.getdata();
setTimeout(() => { setTimeout(() => {
......
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