Skip to content

M
Muse
Commit 1092afe5 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

印象数据看板

parent e6ec4fa8
Show whitespace changes
Inline Side-by-side
Showing with 561 additions and 219 deletions
src/App.vue
View file @ 1092afe5
...@@ -39,6 +39,7 @@ export default { ...@@ -39,6 +39,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css'; @import '//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css';
@import '//at.alicdn.com/t/font_635492_i78o4snnnqp.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
body,html{ body,html{
padding: 0px; padding: 0px;
......
src/components/viitto/dataLook.vue
View file @ 1092afe5
...@@ -74,30 +74,33 @@ ...@@ -74,30 +74,33 @@
/* height: calc(100vh - 122px); */ /* height: calc(100vh - 122px); */
padding: 30px 40px; padding: 30px 40px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
} }
.dataLook .content .el-row,.dataLook .content .el-row .el-col{ .dataLook .content .el-row,.dataLook .content .el-row .el-col{
height: 100%; height: 100%;
} }
.right-data{ .right-data{
background:linear-gradient(0deg,rgba(29,34,63,0.3),rgba(46,56,85,0.3)); background:linear-gradient(0deg,rgba(29,34,63,1),rgba(46,56,85,1));
border-radius:20px; border-radius:20px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: relative;
} }
.right-data::-webkit-scrollbar { .right-data::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 6px; width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
height: 47px; height: 47px;
} }
.right-data::-webkit-scrollbar-thumb { .right-data::-webkit-scrollbar-thumb ,.content::-webkit-scrollbar-thumb,.el-cascader-menu::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/ /*滚动条里面小方块*/
border-radius: 4px; border-radius: 4px;
background: rgba(106,116,146, .35); background: rgba(106,116,146, .35);
} }
.right-data::-webkit-scrollbar-track { .right-data::-webkit-scrollbar-track ,.content::-webkit-scrollbar-track,.el-cascader-menu::-webkit-scrollbar-track{
/*滚动条里面轨道*/ /*滚动条里面轨道*/
border-radius: 4px; border-radius: 4px;
background: #252D48; background: #252D48;
...@@ -171,6 +174,56 @@ ...@@ -171,6 +174,56 @@
.width-100{ .width-100{
width: 100%; width: 100%;
} }
.open-btn{
position: absolute;
left: 0;
color: #3A4158;
top: 45%;
height: 60px;
line-height: 60px;
background: rgba(13,18,36, .5);
border-radius: 6px 0 0 6px;
width: 20px;
text-align: center;
cursor: pointer;
}
.el-cascader-menus{
border: none !important;
}
.el-cascader-menu{
background-color: #1d243d !important;
}
.el-cascader-menu__item,.el-cascader-menu__item.is-active{
color: white !important;
}
.el-cascader-menu__item:focus:not(:active), .el-cascader-menu__item:hover {
background-color: #252D48 !important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: #1d243d;
}
.el-cascader-menu{
border: 0 !important;
}
.my-drawer{
padding: 100px 0 60px 0;
background-color: transparent !important;
}
.my-drawer .el-drawer__header{
display: none;
}
.my-drawer .el-drawer__open .el-drawer.rtl{
background-color: transparent;
}
.my-drawer .el-drawer__body{
height: 100%;
}
.el-cascader__dropdown{
border: none !important
}
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
background-color: #252D48 !important;
}
</style> </style>
<template> <template>
<div class="dataLook" v-loading="!loding"> <div class="dataLook" v-loading="!loding">
...@@ -178,16 +231,6 @@ ...@@ -178,16 +231,6 @@
<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="12" class="type-box">
<div>
<div class="danris " :class="{active: navActive == 0 ? 'active' : ''}" @click="setNavActive(0)">
单日数据展示图
</div>
<div class="danris" :class="{active: navActive == 1 ? 'active' : ''}" @click="setNavActive(1)">
单日数据展示图
</div>
</div>
</el-col>
<el-col :span="8"> <el-col :span="8">
<div class="xilie"> <div class="xilie">
<div>系列</div> <div>系列</div>
...@@ -196,20 +239,6 @@ ...@@ -196,20 +239,6 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- <el-col :span="8">
<div class="xilie">
<div>年度</div>
<div>
<el-date-picker
@change="init"
v-model="StartTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</div>
</el-col> -->
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="6" class="name"> <el-col :span="6" class="name">
...@@ -217,12 +246,16 @@ ...@@ -217,12 +246,16 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="content"> <div class="content" >
<el-row :gutter="40"> <el-row :gutter="40" style="margin-bottom: 20px;">
<el-col :span="16"> <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"/> <lineChartK v-if="chartShow2" :rightShow="rightShow" :lineChartKData="lineChartKData" :zoom="zoom" />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="2" style="position: relative;">
<div class="open-btn" @click="drawer = true">
<i class="iconfont icon-zhankai1" v-if="!rightShow"></i>
<i class="iconfont icon-zhankai-" v-else></i>
</div>
<div class="right-data"> <div class="right-data">
<!-- 报名人数 --> <!-- 报名人数 -->
<div> <div>
...@@ -235,12 +268,6 @@ ...@@ -235,12 +268,6 @@
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <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>10日平均</div>
<div>
{{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 class="item"> <div class="item">
<div>20日平均</div> <div>20日平均</div>
<div> <div>
...@@ -254,9 +281,6 @@ ...@@ -254,9 +281,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 线路占比 --> <!-- 线路占比 -->
<div> <div>
<div class="tab pingfangR"><span>线路占比</span></div> <div class="tab pingfangR"><span>线路占比</span></div>
...@@ -280,12 +304,161 @@ ...@@ -280,12 +304,161 @@
{{day_line_statics[1].OrderPercent*100}}<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>
<div>180日平均</div>
<!-- 报名单 -->
<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">
<div>当日</div>
<div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</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>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item">
<div>当日</div>
<div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</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">
<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>
</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"
:show-close="false"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<div class="right-data">
<!-- 报名人数 -->
<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">
<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>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</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>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<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>
{{day_line_statics[1].OrderPercent*100}}<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>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>
<!-- 报名单 --> <!-- 报名单 -->
...@@ -385,21 +558,30 @@ ...@@ -385,21 +558,30 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-drawer>
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<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-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import lineChart from "./lineChart"; import lineChart from "./lineChart2";
import lineChartK from "./lineChartK";
export default { export default {
components: { components: {
lineChart lineChart,
lineChartK
}, },
data(){ data(){
return { return {
drawer: false,
direction: 'rtl',
rightShow: false,
selectedRegion: [], selectedRegion: [],
navActive: 0, navActive: 0,
options: [], options: [],
...@@ -415,6 +597,7 @@ export default { ...@@ -415,6 +597,7 @@ export default {
unitpriceList: [], unitpriceList: [],
dateList: [], dateList: [],
chartShow: false, chartShow: false,
chartShow2: false,
lineList: [], lineList: [],
prolineId: 0, prolineId: 0,
slineId: 0, slineId: 0,
...@@ -426,6 +609,7 @@ export default { ...@@ -426,6 +609,7 @@ export default {
day_line_statics: [], day_line_statics: [],
day_total_guestprice: {}, day_total_guestprice: {},
loding: false, loding: false,
lineChartKData: [],
} }
}, },
watch: { watch: {
...@@ -456,6 +640,9 @@ export default { ...@@ -456,6 +640,9 @@ export default {
// this.init() // this.init()
// }, 1000); // }, 1000);
},methods:{ },methods:{
handleClose(done) {
done();
},
loadRegionChild(regionIdArr) { loadRegionChild(regionIdArr) {
let lineId = 0, let lineId = 0,
slineId = 0; slineId = 0;
...@@ -492,14 +679,21 @@ export default { ...@@ -492,14 +679,21 @@ export default {
this.loding = false; this.loding = false;
this.chartShow = 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 url2 = "http://47.96.23.199:5001/api/order/get_single_data_v2"
let msg={ let msg={
startdate: this.StartTime, startdate: this.StartTime,
lineid: this.prolineId, lineid: this.prolineId,
ltid: this.slineId ltid: this.slineId
} }
this.getOutherData(url, msg)
this.getKdata(url2, msg)
},
getOutherData: function (url, msg){
this.apiRequest(url,{msg:msg},r=>{ this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){ if(r.data.resultCode==1){
let data = r.data.data; let data = r.data.data;
console.log(data)
this.day_avg_num = data.day_avg_num this.day_avg_num = data.day_avg_num
this.day_history_price = data.day_history_price this.day_history_price = data.day_history_price
this.day_order_statics = data.day_order_statics this.day_order_statics = data.day_order_statics
...@@ -508,22 +702,16 @@ export default { ...@@ -508,22 +702,16 @@ export default {
this.day_line_statics = data.day_line_statics this.day_line_statics = data.day_line_statics
// 点击 // 点击
this.clickcountList = data.day_guestprice.clickcountList this.clickcountList = data.day_guestprice.clickcountList
// 人数 // 人数
this.guestnumList = data.day_guestprice.guestnumList this.guestnumList = data.day_guestprice.guestnumList
// 钱 // 钱
this.unitpriceList = data.day_guestprice.unitpriceList this.unitpriceList = data.day_guestprice.unitpriceList
// 成交 // 成交
this.preferpriceList = data.day_guestprice.preferpriceList this.preferpriceList = data.day_guestprice.preferpriceList
// 报名单 // 报名单
this.ordercountList = data.day_guestprice.ordercountList this.ordercountList = data.day_guestprice.ordercountList
// 时间 // 时间
this.dateList = data.day_guestprice.dateList this.dateList = data.day_guestprice.dateList
// 合计 // 合计
this.day_total_guestprice = data.day_total_guestprice[0] this.day_total_guestprice = data.day_total_guestprice[0]
this.chartShow = true; this.chartShow = true;
...@@ -534,6 +722,20 @@ export default { ...@@ -534,6 +722,20 @@ export default {
this.loding = true; this.loding = true;
}); });
}, },
getKdata: function(url, msg){
this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data.k_unitprice;
console.log(data)
this.lineChartKData = data;
this.chartShow2 = true;
this.$forceUpdate()
}else{
this.Error(r.data.message);
}
this.loding = true;
});
},
setNavActive: function(n){ setNavActive: function(n){
this.navActive = n this.navActive = n
} }
......
src/components/viitto/lineChart2.vue
View file @ 1092afe5
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
</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']
export default { export default {
props:[ props:[
'preferpriceList', 'preferpriceList',
...@@ -78,16 +77,32 @@ export default { ...@@ -78,16 +77,32 @@ export default {
{ {
show: true, show: true,
realtime: true, realtime: true,
start: 0, start: 90,
end: 2, end: 100,
xAxisIndex: [0, 1] xAxisIndex: [0, 1, 2],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
}, },
{ {
type: 'inside', type: 'inside',
realtime: true, realtime: true,
start: 0, start: 90,
end: 2, end: 100,
xAxisIndex: [0, 1] xAxisIndex: [0, 1, 2],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
} }
], ],
axisPointer: { axisPointer: {
...@@ -96,42 +111,25 @@ export default { ...@@ -96,42 +111,25 @@ export default {
}, },
grid: [{ grid: [{
left: 50, left: 80,
right: 50, right: 10,
height: '17%' top: '5%',
} height: '24%'
, {
left: 50,
right: 50,
top: '31%',
height: '17%'
}, { }, {
left: 50, left: 80,
right: 50, right: 10,
top: '55%', top: '37%',
height: '17%' height: '24%'
}, { }, {
left: 50, left: 80,
right: 50, right: 10,
top: '80%', top: '68%',
height: '17%' height: '24%'
} }
], ],
xAxis : [ xAxis : [
{ {
type : 'category', gridIndex: 0,
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
type : 'category',
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
gridIndex: 1,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: _this.dateList, data: _this.dateList,
...@@ -139,7 +137,7 @@ export default { ...@@ -139,7 +137,7 @@ export default {
"show": false "show": false
}, },
{ {
gridIndex: 2, gridIndex: 1,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: _this.dateList, data: _this.dateList,
...@@ -147,7 +145,7 @@ export default { ...@@ -147,7 +145,7 @@ export default {
"show": false, "show": false,
}, },
{ {
gridIndex: 3, gridIndex: 2,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: _this.dateList, data: _this.dateList,
...@@ -161,46 +159,6 @@ export default { ...@@ -161,46 +159,6 @@ export default {
yAxis : [ yAxis : [
{ {
gridIndex: 0, gridIndex: 0,
name : '人数 '+ _this.day_total_guestprice.GuestNum +'人',
type : 'value',
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 60],
fontSize: 18
},
axisLabel: {
color: '#34C69C',
},
},
{
gridIndex: 0,
name : '价格',
type : 'value',
position: 'right',
splitLine: {
show: false,
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 60, 0, 0],
fontSize: 18
},
axisLabel: {
color: '#12BBFF',
},
},
{
gridIndex: 1,
name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元', name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
type : 'value', type : 'value',
inverse: false, inverse: false,
...@@ -220,7 +178,7 @@ export default { ...@@ -220,7 +178,7 @@ export default {
} }
}, },
{ {
gridIndex: 2, gridIndex: 1,
name : '报名单数 '+ _this.day_total_guestprice.OrderCount, name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
type : 'value', type : 'value',
inverse: false, inverse: false,
...@@ -240,7 +198,7 @@ export default { ...@@ -240,7 +198,7 @@ export default {
} }
}, },
{ {
gridIndex: 3, gridIndex: 2,
name : '产品点击 '+ _this.day_total_guestprice.ClickCount, name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
type : 'value', type : 'value',
inverse: false, inverse: false,
...@@ -262,7 +220,7 @@ export default { ...@@ -262,7 +220,7 @@ export default {
], ],
series : [ series : [
{ {
name:'人数', name:'成交总量',
type:'line', type:'line',
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
...@@ -270,90 +228,24 @@ export default { ...@@ -270,90 +228,24 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: _this.guestnumList,
itemStyle: {
borderWidth: 2,
color: '#0F56FF',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#12BBFF",
shadowBlur: 10,
width: 5,
shadowColor: "#0F56FF"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(18,187,255,1)" },
{ offset: 1, color: "rgba(15,86,255,0)" }
])
}
},
tooltip: {
formatter: '{b}: {c}'
}
},
{
name:'价格',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
// symbol: 'none',
showSymbol: false,
data: _this.unitpriceList,
itemStyle: {
borderWidth: 2,
color: '#44D6AC',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#A7DE8A",
shadowBlur: 10,
width: 5,
shadowColor: "#44D6AC"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(167,222,138,1)" },
{ offset: 1, color: "rgba(167,222,138,0)" }
])
}
},
},
{
name:'成交总量',
type:'line',
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.preferpriceList, data: _this.preferpriceList,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#F5AF19', color: '#F5AF19',
shadowBlur: 10, shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
}, },
lineStyle: { lineStyle: {
color: "#F5AF19", color: "#F5AF19",
shadowBlur: 10, shadowBlur: 5,
width: 5, width: 3,
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: .8, color: "rgba(245,175,25,0)" }
]) ])
} }
}, },
...@@ -362,8 +254,8 @@ export default { ...@@ -362,8 +254,8 @@ export default {
{ {
name:'报名单数', name:'报名单数',
type:'line', type:'line',
xAxisIndex: 3, xAxisIndex: 1,
yAxisIndex: 3, yAxisIndex: 1,
symbolSize: 2, symbolSize: 2,
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
...@@ -372,20 +264,20 @@ export default { ...@@ -372,20 +264,20 @@ export default {
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#3FD2F3', color: '#3FD2F3',
shadowBlur: 10, shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
}, },
lineStyle: { lineStyle: {
color: "#9345F8", color: "#9345F8",
shadowBlur: 10, shadowBlur: 5,
width: 5, width: 3,
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: .8, color: "rgba(147,69,248,0)" }
]) ])
} }
}, },
...@@ -394,8 +286,8 @@ export default { ...@@ -394,8 +286,8 @@ export default {
{ {
name:'产品点击', name:'产品点击',
type:'line', type:'line',
xAxisIndex: 4, xAxisIndex: 2,
yAxisIndex: 4, yAxisIndex: 2,
symbolSize: 2, symbolSize: 2,
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
...@@ -404,20 +296,20 @@ export default { ...@@ -404,20 +296,20 @@ export default {
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#EE4454', color: '#EE4454',
shadowBlur: 10, shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
}, },
lineStyle: { lineStyle: {
color: "#FFAA85", color: "#FFAA85",
width: 5, width: 3,
shadowBlur: 10, shadowBlur: 5,
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: .8, color: "rgba(239,71,86,0)" }
]) ])
} }
}, },
......
src/components/viitto/lineChartK.vue 0 → 100644
View file @ 1092afe5
<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[4]);
}
return result;
}
export default {
props:[
'zoom',
'rightShow',
'lineChartKData'
],
data(){
return {
myChart: null,
dataList: [],
dates: []
}
},watch:{
},created(){
},mounted() {
let data = this.lineChartKData.map(function (item) {
return [+item.StartPrice, +item.MaxPrice, +item.EndPrice, +item.MinPrice, +item.ClickCount];
});
var dates = this.lineChartKData.map(function (item) {
return item.CreateDate;
});
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',
legend: {
data: ['成交单价', '产品点击'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
},
left: 100,
top: 10,
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var obj = {}
if (params[0].value[0] !== undefined) {// 防止放上去提示undefined
obj = {
sName: params[0].seriesName,
name: params[0].name,
start: params[0].value[1],
close: params[0].value[2],
low: params[0].value[3],
height: params[0].value[4],
click: params[0].value[5],
}
} else {
obj = {
sName: params[1].seriesName,
name: params[1].name,
start: params[1].value[1],
close: params[1].value[2],
low: params[1].value[3],
height: params[1].value[4],
click: params[1].value[5],
}
}
var res = obj.sName + ' ' + obj.name
res += '<br/> 开始值: ' + obj.start
res += '<br/> 最高值: ' + obj.height
res += '<br/> 结束值: ' + obj.close
res += '<br/> 最低值: ' + obj.low
res += '<br/> 点击: ' + obj.click
return res
},
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false }
},
grid: {
bottom: 80,
left: 70,
right: 20,
},
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,
},
{
name: '产品点击',
type: 'line',
data: calculateMA(5, _this.dataList),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
color: "#F5AF19",
}
}
},
// {
// name: '月均线',
// type: 'line',
// data: calculateMA(10, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '季度均线',
// type: 'line',
// data: calculateMA(20, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '黄金线',
// type: 'line',
// data: calculateMA(30, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// 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