Skip to content

M
Muse
Commit 8e2576bc authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

微途数据看板

parent c4478ff8
Show whitespace changes
Inline Side-by-side
Showing with 217 additions and 98 deletions
src/components/viitto/lineChart.vue
View file @ 8e2576bc
<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%;
}
......@@ -9,7 +30,7 @@
</div>
</template>
<script>
let timeData = ['6/12 2:00', '6/12 3:00', '6/12 4:00', '6/12 5:00']
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 {
components: {
......@@ -25,42 +46,58 @@ export default {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
let option = {
textStyle: {
fontFamily: 'PINGFANG REGULAR',
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
animation: true,
type: 'cross',
label: {
backgroundColor: '#E62382',
},
lineStyle: {
width: 4,
color: 'rgba(255,255,255,.1)'
}
},
legend: {
data:['流量','降雨量'],
x: 'left'
backgroundColor: '#E62382',
confine: true,
},
axisPointer: {
snap: true,
link: {xAxisIndex: 'all'}
},
grid: [{
left: 50,
right: 50,
height: '20%'
height: '17%'
}, {
left: 50,
right: 50,
top: '35%',
height: '20%'
top: '31%',
height: '17%'
}, {
left: 50,
right: 50,
top: '60%',
height: '20%'
top: '55%',
height: '17%'
}, {
left: 50,
right: 50,
top: '85%',
height: '20%'
top: '80%',
height: '17%'
}],
xAxis : [
{
type : 'category',
boundaryGap : false,
data: timeData,
"show": false,
},
{
type : 'category',
boundaryGap : false,
......@@ -88,24 +125,59 @@ export default {
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom'
position: 'bottom',
"show": true,
axisLabel: {
color: '#fff',
},
}
],
yAxis : [
{
name : '人数',
gridIndex: 0,
name : '人数 5人',
type : 'value',
max : 100,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 60],
fontSize: 18
},
axisLabel: {
color: '#34C69C',
},
},
{
gridIndex: 0,
name : '价格',
type : 'value',
max : 60,
position: 'right',
max : 59999,
splitLine: {
show: false,
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 60, 0, 0],
fontSize: 18
},
axisLabel: {
color: '#12BBFF',
},
},
{
gridIndex: 1,
name : '成交总量',
name : '成交总量 ￥688.55元',
type : 'value',
inverse: false,
splitLine: {
......@@ -114,10 +186,18 @@ export default {
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 160],
fontSize: 18
},
axisLabel: {
color: '#F5AF19',
}
},
{
gridIndex: 2,
name : '报名单数',
name : '报名单数 88',
type : 'value',
inverse: false,
splitLine: {
......@@ -126,10 +206,18 @@ export default {
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#3FD2F3',
}
},
{
gridIndex: 3,
name : '产品点击',
name : '产品点击 1699',
type : 'value',
inverse: false,
splitLine: {
......@@ -138,6 +226,14 @@ export default {
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [10, 0, 0, 110],
fontSize: 18
},
axisLabel: {
color: '#EE4454',
}
}
],
series : [
......@@ -146,18 +242,22 @@ export default {
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
data:[4,15,20,29],
showSymbol: false,
data:[4,15,20,29,5,18,12,23,26,10,21],
itemStyle: {
normal: {
borderWidth: 2,
color: '#0F56FF',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#12BBFF",
shadowBlur: 10,
width: 5,
shadowColor: "#0F56FF"
}
}
},
areaStyle: {
normal: {
......@@ -167,24 +267,32 @@ export default {
])
}
},
tooltip: {
formatter: '{b}: {c}'
}
},
{
name:'价格',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
data:[5,15.02,4,45],
// symbol: 'none',
showSymbol: false,
data:[5,15.02,4,45,1988.95,15888.65,888.66,666,5466.88,1536,1235,2334.56],
itemStyle: {
normal: {
borderWidth: 2,
color: '#44D6AC',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#A7DE8A",
shadowBlur: 10,
width: 5,
shadowColor: "#44D6AC"
}
}
},
areaStyle: {
normal: {
......@@ -198,20 +306,24 @@ export default {
{
name:'成交总量',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
data: [23,88,12,45],
showSymbol: false,
data: [23,88,12,45,26,33,24,26,28,26,29],
itemStyle: {
normal: {
borderWidth: 2,
color: '#F5AF19',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#F5AF19",
shadowBlur: 10,
width: 5,
shadowColor: "#F5AF19"
}
}
},
areaStyle: {
normal: {
......@@ -226,20 +338,24 @@ export default {
{
name:'报名单数',
type:'line',
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 8,
hoverAnimation: false,
xAxisIndex: 3,
yAxisIndex: 3,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
data: [8,5,6,7],
showSymbol: false,
data: [8,5,6,7,11,2,6,8,4,5,5],
itemStyle: {
normal: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#9345F8",
shadowBlur: 10,
width: 5,
shadowColor: "#3FD2F3"
}
}
},
areaStyle: {
normal: {
......@@ -254,20 +370,24 @@ export default {
{
name:'产品点击',
type:'line',
xAxisIndex: 3,
yAxisIndex: 3,
symbolSize: 8,
hoverAnimation: false,
xAxisIndex: 4,
yAxisIndex: 4,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
data: [67,96,33,108],
showSymbol: false,
data: [67,96,33,108,222,68,156,263,108,123,12],
itemStyle: {
normal: {
borderWidth: 2,
color: '#EE4454',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#FFAA85",
width: 5,
shadowBlur: 10,
shadowColor: "#EE4454"
}
}
},
areaStyle: {
normal: {
......
src/components/viitto/viittoData.vue
View file @ 8e2576bc
......@@ -322,7 +322,7 @@ ul li {
<el-col :span="12">
<div class="zhanbi-tit"></div>
<ul class="progress-box">
<li class="progress-item" v-for="item in dataList.OrderTypeRatio">
<li class="progress-item" v-for="(item, index) in dataList.OrderTypeRatio" :key="index">
<p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></el-progress>
</li>
......@@ -331,7 +331,7 @@ ul li {
<el-col :span="12">
<div class="zhanbi-tit zhanbi-tit2"></div>
<ul class="progress-box">
<li class="progress-item" v-for="item in dataList.YearOrderTypeRatio">
<li class="progress-item" v-for="(item, index) in dataList.YearOrderTypeRatio" :key="index">
<p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></el-progress>
</li>
......@@ -357,7 +357,7 @@ ul li {
<p>当前活跃用户</p>
<p class="fs50 fcff">{{dataList.ToDayClientLoginNum}}</p>
</div>
<div class="yonghu-item" v-for="item in dataList.ToDayClientLogin">
<div class="yonghu-item" v-for="(item, index) in dataList.ToDayClientLogin" :key='index'>
<p class="sb-tit">{{item.Name}}</p>
<P class="fs50 fcff">{{item.Count}}
<img v-if="item.Change==1" class="biaoji" src="../../assets/img/viitto/lvsedian.png" alt="">
......@@ -370,7 +370,7 @@ ul li {
</el-row>
<el-row><p class="bottom-tit">各平台交易额占比</p></el-row>
<el-row class="bottom" :gutter="35">
<el-col :span="8" v-for="(item,index) in dataList.ToDayPlatformTrade">
<el-col :span="8" v-for="(item,index) in dataList.ToDayPlatformTrade" :key="index">
<div class="bottom-item">
<div>
<img v-if="item.Name=='PC'" src="../../assets/img/viitto/pc_1.png" alt="">
......
vue.config.js
View file @ 8e2576bc
......@@ -8,8 +8,7 @@ module.exports = {
}
},
externals: [
'BMap',
require('webpack-require-http')
'BMap'
]
},
}
\ 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