jack
/
parkBigScreen2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

合并

master
j1ack 3 years ago
parent
60c89a99e6
commit
0874555f98
5 changed files with 179 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/img12.png
  2. 79
      src/components/ringPie/index.vue
  3. 3
      src/components/scrollArc/index.vue
  4. 83
      src/components/szBar/index.vue
  5. 69
      src/views/Brand.vue

BIN
public/img/img12.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

79
src/components/ringPie/index.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<div class="wrap-container sn-container">
<!-- <div class="wrap-container sn-container">
<div class="sn-content">
<div class="sn-title">环形饼图</div>
<div class="sn-body">
@ -23,6 +23,9 @@
</div>
</div>
</div>
</div> -->
<div class="income-container">
<div class="chart" id="chart_rp"></div>
</div>
</template>
@ -42,10 +45,30 @@ export default {
getEchart() {
let myChart = echarts.init(document.getElementById('chart_rp'));
this.option = {
title: {
text: '50%',
// 副标题
subtext: "车位已使用",
// 主副标题间距
itemGap: 10,
x: 'center',
y: '80',
// 主标题样式
textStyle: {
fontSize: '26',
color: '#fff'
},
// 副标题样式
subtextStyle: {
fontSize: '14',
fontWeight: '100',
color: '#8A9AC5'
}
},
series: [{
name: '环形饼图',
type: 'pie',
radius: ['68%', '80%'],
radius: ['48%', '70%'],
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
@ -54,7 +77,11 @@ export default {
},
emphasis: {
label: {
show: false
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
@ -66,23 +93,31 @@ export default {
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#6984fe'
},{
offset: .2,
color: '#47BDFF'
}, {
offset: .5,
color: '#34AEFF'
}, {
offset: 1,
color: '#24d1fd'
}])
color: '#0589FF'
}
]),
// borderRadius:800,
},
}
},{
},
{
value: 4,
name: '大数据',
itemStyle: {
normal: {
color: '#eee'
color: '#3B4257',
}
}
}]
}
]
}]
}
@ -105,25 +140,28 @@ export default {
top: 1978px;
width: 432px;
height: 400px;
.wrap-container {
left: 125px;
top: 94px;
width: 150px;
height: 150px;
}
.chartsdom {
width: 100%;
height: 100%;
}
.back-chart{
.back-chart {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background:url(../../assets/img/back_chart.png) no-repeat center;
background: url(../../assets/img/back_chart.png) no-repeat center;
}
.arrow-cir {
width: 8px;
height: 8px;
@ -132,12 +170,14 @@ export default {
top: 0;
left: 0;
opacity: 0;
&.arrow-cir1 {
background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;
-webkit-animation: arrow-cir1 5s linear infinite;
animation: arrow-cir1 5s linear infinite;
offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
}
&.arrow-cir2 {
background: url(../../assets/img/icon_05.png) no-repeat 50% 50%;
-webkit-animation: arrow-cir2 5s linear infinite;
@ -153,16 +193,19 @@ export default {
offset-distance: 40%;
opacity: 1;
}
100% {
offset-distance: 140%;
opacity: 1;
}
}
@keyframes arrow-cir1 {
0% {
offset-distance: 40%;
opacity: 1;
}
100% {
offset-distance: 140%;
opacity: 1;
@ -174,19 +217,29 @@ export default {
offset-distance: 0%;
opacity: 1;
}
100% {
offset-distance: 100%;
opacity: 1;
}
}
@keyframes arrow-cir2 {
0% {
offset-distance: 0%;
opacity: 1;
}
100% {
offset-distance: 100%;
opacity: 1;
}
}
.income-container {
.chart {
width: 3rem;
height: 3rem;
}
}
</style>

3
src/components/scrollArc/index.vue
View File

@ -114,7 +114,8 @@ export default {
color: '#5d83ff',
borderColor: '#fff',
borderWidth: 2,
opacity: 1
opacity: 1,
},
},
areaStyle: {

83
src/components/szBar/index.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<div class="wrap-container sn-container">
<!-- <div class="wrap-container sn-container">
<div class="sn-content">
<div class="sn-title">双轴柱状图</div>
<div class="sn-body">
@ -14,6 +14,9 @@
</div>
</div>
</div>
</div> -->
<div class="income-container">
<div class="chart" id="chart_bar"></div>
</div>
</template>
@ -34,7 +37,7 @@ export default {
methods: {
getEchart() {
let myChart = echarts.init(document.getElementById('chart_bar'));
let barWidth = '10%';
let barWidth = '15%';
let dataCoord = [
{coord: [0, 9]},
{coord: [1, 12]},
@ -80,6 +83,22 @@ export default {
color: 'rgba(40, 103, 168, 0.3)',
}
},
},
tooltip: {
trigger: 'axis',
showContent: true,
axisPointer: {
type: 'shadow',
shadowStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#5d83ff'
},{
offset: 0,
color: 'rgba(255, 255, 255, 0)'
}])
}
},
},
yAxis: {
axisLabel: {
@ -116,12 +135,20 @@ export default {
offset: 1,
color: 'rgba(0, 0, 0, 0)'
},{
offset: 0.5,
offset: 0.6,
color: '#466e71'
},{
offset: 0,
color: '#eb9b44'
}])
color: '#43FFFF'
}]),
label: {
position:"top",
show: true, //开启显示
textStyle: { //数值样式
color: '#fff',
fontSize: 10
}
}
}
},
barWidth: barWidth,
@ -129,51 +156,18 @@ export default {
symbol: 'circle',
itemStyle: {
normal: {
color: '#eb9b44',
shadowColor: '#eb9b44',
color: '#43FFFF',
shadowColor: '#43FFFF',
shadowBlur: 20
}
},
symbolSize: [10, 10], // 容器大小
symbolSize: [5, 5], // 容器大小
symbolOffset: [0, 0], // 位置偏移
data: dataCoord,
},
data: this.yData1
},
{
name: '负值柱状图',
type: 'bar',
stack: 'one',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 0, 0, 0)'
},{
offset: 0.5,
color: '#774a75'
},{
offset: 1,
color: '#b34d69'
}])
}
},
barWidth: barWidth,
markPoint: {
symbol: 'circle',
itemStyle: {
normal: {
color: '#b34d69',
shadowColor: '#b34d69',
shadowBlur: 20
}
},
symbolSize: [10, 10],
symbolOffset: [0, 0],
data: dataCoord2,
},
data: this.yData2
}
]
};
myChart.setOption(this.option, true);
@ -190,6 +184,11 @@ export default {
</script>
<style lang="scss" scoped>
.income-container {
.chart {
height: 3rem;
}
}
.sn-container {
left: 975px;
top: 690px;

69
src/views/Brand.vue
View File

@ -112,14 +112,42 @@
<div class="panel-footer"></div>
</div>
<div class="panel">
<h2>客户分布</h2>
<distribution />
<div class="left-top">
<div class="topBg">
车辆使用统计
</div>
<div class="carFlex">
<div class="let">
<div class="item">
<p class="p1">总车位</p>
<p class="p2">6666</p>
</div>
<div class="item">
<p class="p1">周转率</p>
<p class="p2">66%</p>
</div>
</div>
<ringPie />
<div class="rig">
<div class="item">
<p class="p1">已使用车位</p>
<p class="p2">6666</p>
</div>
<div class="item">
<p class="p1">剩余车位</p>
<p class="p2">6666</p>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
<div class="panel">
<h2>发展历程</h2>
<!-- <history /> -->
<div class="left-top">
<div class="topBg">
24小时车位使用统计
</div>
<szBar />
<div class="panel-footer"></div>
</div>
</div>
@ -482,6 +510,31 @@ export default {
</script>
<style lang="scss" scoped>
.carFlex{
display: flex;
color: #fff;
justify-content: center;
align-items: center;
.item{
display: flex;
flex-direction: column;
justify-content: center;
width: 2rem;
text-align: center;
height: 1.3rem;
background: url(/img/img12.png) no-repeat;
background-size: contain;
margin-top: .3rem;
.p1{
font-size: .2rem;
margin-bottom: .1rem;
}
.p2{
font-size: .3rem;
}
}
}
.topBg {
height: .7rem;
background: url(/img/img1.png) no-repeat;
@ -492,7 +545,8 @@ export default {
color: #AECEFF;
font-size: .21rem;
}
.topBg2{
.topBg2 {
height: .7rem;
background: url(/img/img11.png) no-repeat;
background-size: contain;
@ -502,6 +556,7 @@ export default {
color: #AECEFF;
font-size: .21rem;
}
.left-top {
height: 3.5rem;
position: relative;

Write Preview
Loading…
Cancel
Save