Skip to content

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

印象数据看板

parent e6ec4fa8
Hide 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 {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css';
@import '//at.alicdn.com/t/font_635492_i78o4snnnqp.css';
@import './assets/global/global.css';
body,html{
padding: 0px;
......
src/components/viitto/dataLook.vue
View file @ 1092afe5
......@@ -74,30 +74,33 @@
/* height: calc(100vh - 122px); */
padding: 30px 40px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
}
.dataLook .content .el-row,.dataLook .content .el-row .el-col{
height: 100%;
}
.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;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.right-data::-webkit-scrollbar {
.right-data::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
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;
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;
background: #252D48;
......@@ -171,6 +174,56 @@
.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>
<template>
<div class="dataLook" v-loading="!loding">
......@@ -178,16 +231,6 @@
<el-row :gutter="70">
<el-col :span="18">
<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">
<div class="xilie">
<div>系列</div>
......@@ -196,20 +239,6 @@
</div>
</div>
</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-col>
<el-col :span="6" class="name">
......@@ -217,12 +246,16 @@
</el-col>
</el-row>
</div>
<div class="content">
<el-row :gutter="40">
<el-col :span="16">
<lineChart v-if="chartShow" :zoom="zoom" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/>
<div class="content" >
<el-row :gutter="40" style="margin-bottom: 20px;">
<el-col :span="22">
<lineChartK v-if="chartShow2" :rightShow="rightShow" :lineChartKData="lineChartKData" :zoom="zoom" />
</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>
......@@ -235,12 +268,6 @@
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</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>20日平均</div>
<div>
......@@ -254,9 +281,6 @@
</div>
</div>
</div>
<!-- 线路占比 -->
<div>
<div class="tab pingfangR"><span>线路占比</span></div>
......@@ -280,12 +304,161 @@
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<!-- <div class="item">
<div>180日平均</div>
</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>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</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>
<!-- 报名单 -->
......@@ -385,21 +558,30 @@
</div>
</div>
</div>
</div>
</el-drawer>
</el-col>
</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>
</template>
<script>
import lineChart from "./lineChart";
import lineChart from "./lineChart2";
import lineChartK from "./lineChartK";
export default {
components: {
lineChart
lineChart,
lineChartK
},
data(){
return {
drawer: false,
direction: 'rtl',
rightShow: false,
selectedRegion: [],
navActive: 0,
options: [],
......@@ -415,6 +597,7 @@ export default {
unitpriceList: [],
dateList: [],
chartShow: false,
chartShow2: false,
lineList: [],
prolineId: 0,
slineId: 0,
......@@ -426,6 +609,7 @@ export default {
day_line_statics: [],
day_total_guestprice: {},
loding: false,
lineChartKData: [],
}
},
watch: {
......@@ -456,6 +640,9 @@ export default {
// this.init()
// }, 1000);
},methods:{
handleClose(done) {
done();
},
loadRegionChild(regionIdArr) {
let lineId = 0,
slineId = 0;
......@@ -492,14 +679,21 @@ export default {
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
}
this.getOutherData(url, msg)
this.getKdata(url2, msg)
},
getOutherData: function (url, msg){
this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data;
console.log(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
......@@ -508,22 +702,16 @@ export default {
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;
......@@ -534,6 +722,20 @@ export default {
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){
this.navActive = n
}
......
src/components/viitto/lineChart2.vue
View file @ 1092afe5
......@@ -30,7 +30,6 @@
</div>
</template>
<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 {
props:[
'preferpriceList',
......@@ -78,16 +77,32 @@ export default {
{
show: true,
realtime: true,
start: 0,
end: 2,
xAxisIndex: [0, 1]
start: 90,
end: 100,
xAxisIndex: [0, 1, 2],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
},
{
type: 'inside',
realtime: true,
start: 0,
end: 2,
xAxisIndex: [0, 1]
start: 90,
end: 100,
xAxisIndex: [0, 1, 2],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
}
],
axisPointer: {
......@@ -96,42 +111,25 @@ export default {
},
grid: [{
left: 50,
right: 50,
height: '17%'
}
, {
left: 50,
right: 50,
top: '31%',
height: '17%'
left: 80,
right: 10,
top: '5%',
height: '24%'
}, {
left: 50,
right: 50,
top: '55%',
height: '17%'
left: 80,
right: 10,
top: '37%',
height: '24%'
}, {
left: 50,
right: 50,
top: '80%',
height: '17%'
left: 80,
right: 10,
top: '68%',
height: '24%'
}
],
xAxis : [
{
type : 'category',
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
type : 'category',
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
gridIndex: 1,
gridIndex: 0,
type : 'category',
boundaryGap : false,
data: _this.dateList,
......@@ -139,7 +137,7 @@ export default {
"show": false
},
{
gridIndex: 2,
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: _this.dateList,
......@@ -147,7 +145,7 @@ export default {
"show": false,
},
{
gridIndex: 3,
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: _this.dateList,
......@@ -159,48 +157,8 @@ export default {
}
],
yAxis : [
{
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,
gridIndex: 0,
name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
type : 'value',
inverse: false,
......@@ -220,7 +178,7 @@ export default {
}
},
{
gridIndex: 2,
gridIndex: 1,
name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
type : 'value',
inverse: false,
......@@ -240,7 +198,7 @@ export default {
}
},
{
gridIndex: 3,
gridIndex: 2,
name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
type : 'value',
inverse: false,
......@@ -262,7 +220,7 @@ export default {
],
series : [
{
name:'人数',
name:'成交总量',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
......@@ -270,90 +228,24 @@ export default {
hoverAnimation: true,
smooth: true,
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,
itemStyle: {
borderWidth: 2,
color: '#F5AF19',
shadowBlur: 10,
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#F5AF19",
shadowBlur: 10,
width: 5,
shadowBlur: 5,
width: 3,
shadowColor: "#F5AF19"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 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 {
{
name:'报名单数',
type:'line',
xAxisIndex: 3,
yAxisIndex: 3,
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
......@@ -372,20 +264,20 @@ export default {
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 10,
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#9345F8",
shadowBlur: 10,
width: 5,
shadowBlur: 5,
width: 3,
shadowColor: "#3FD2F3"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 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 {
{
name:'产品点击',
type:'line',
xAxisIndex: 4,
yAxisIndex: 4,
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
......@@ -404,20 +296,20 @@ export default {
itemStyle: {
borderWidth: 2,
color: '#EE4454',
shadowBlur: 10,
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#FFAA85",
width: 5,
shadowBlur: 10,
width: 3,
shadowBlur: 5,
shadowColor: "#EE4454"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 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