Skip to content

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

微途数据看板

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