first commit
This commit is contained in:
izory
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
访客
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
消息
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
金额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.card-panel-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
margin: 14px auto !important;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,218 @@
|
||||
|
||||
<template>
|
||||
<div id="big-data-container" class="big-data-container">
|
||||
<div class="head">
|
||||
<h1>大屏数据统计分析显示</h1>
|
||||
</div>
|
||||
<div class="data-container">
|
||||
<div class="data-left">
|
||||
<div class="data-left-item">
|
||||
<div class="title">商品销量分类</div>
|
||||
<div id="chart-left-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">本月商品销量</div>
|
||||
<div id="chart-left-3" style="height: calc(100% - 30px);"></div>
|
||||
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">7日订单销量</div>
|
||||
<div id="chart-left-2" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-center">
|
||||
<!-- <div class="title">中间位置</div> -->
|
||||
<div class="center-top-num">
|
||||
<div class="item">
|
||||
<div class="text">累计销量</div>
|
||||
<div class="num">220,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">累计销售金额</div>
|
||||
<div class="num">58,000,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">购买用户人数</div>
|
||||
<div class="num">15,000</div>
|
||||
</div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="center-top">
|
||||
<div class="title">用户活跃信息-1</div>
|
||||
<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="title">订单销售统计</div>
|
||||
<div id="chart-center" class="chart-center"></div>
|
||||
</div>
|
||||
<div class="data-right">
|
||||
<div class="data-right-item">
|
||||
<div class="title">销售情况走势</div>
|
||||
<div id="chart-right-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item">
|
||||
<div class="title">用户活跃信息</div>
|
||||
<iview-circle></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item right-3">
|
||||
<div class="title">商品销售排行</div>
|
||||
<div id="chart-right-3" class="right-item">
|
||||
<div class="item">
|
||||
<div class="top">排名</div>
|
||||
<div class="pro-name">商品名称</div>
|
||||
<div class="num">销量</div>
|
||||
<div class="num">销售金额</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-1">
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="pro-name">卡帝乐鳄鱼</div>
|
||||
<div class="num">2,200</div>
|
||||
<div class="num">360,00</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-2">
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div class="pro-name">春夏男T恤</div>
|
||||
<div class="num">1,700</div>
|
||||
<div class="num">24,500</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-3">
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class="pro-name">男女同款休闲鞋</div>
|
||||
<div class="num">1,120</div>
|
||||
<div class="num">12,700</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
import {
|
||||
chartLeft1,
|
||||
chartLeft2,
|
||||
chartLeft3,
|
||||
chartRight1
|
||||
} from "./bigdata/chart-options";
|
||||
import IviewCircle from "./bigdata/IviewCircle";
|
||||
import "./bigdata/layout.less";
|
||||
export default {
|
||||
components: {
|
||||
"iview-circle": IviewCircle
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
var $chartLeft1 = echarts.init(document.getElementById("chart-left-1"));
|
||||
$chartLeft1.setOption(chartLeft1);
|
||||
|
||||
var $chartLeft2 = echarts.init(document.getElementById("chart-left-2"));
|
||||
$chartLeft2.setOption(chartLeft2);
|
||||
|
||||
var $chartLeft3 = echarts.init(document.getElementById("chart-left-3"));
|
||||
$chartLeft3.setOption(chartLeft3);
|
||||
|
||||
var $chartCenter = echarts.init(document.getElementById("chart-center"));
|
||||
$chartCenter.setOption(chartRight1);
|
||||
|
||||
var $chartRight1 = echarts.init(document.getElementById("chart-right-1"));
|
||||
$chartRight1.setOption(chartRight1);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* .chart-center {
|
||||
display: flex;
|
||||
border: 1px solid #0000ff;
|
||||
height: 200px;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chart-center .item {
|
||||
text-align: center;
|
||||
border: 1px solid #00c1b3;
|
||||
flex: 1;
|
||||
} */
|
||||
.right-3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* margin-top: 20px; */
|
||||
}
|
||||
|
||||
.right-3 .right-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-3 .item {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #549069;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
margin: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.right-3 .item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.right-3 .item > div {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.right-3 .top {
|
||||
width: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-3 .top span {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
top: 5px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.right-3 .top-1 span {
|
||||
background: #e80d0d;
|
||||
}
|
||||
|
||||
.right-3 .top-2 span {
|
||||
background: #00c935;
|
||||
}
|
||||
|
||||
.right-3 .top-3 span {
|
||||
background: #0083f4;
|
||||
}
|
||||
|
||||
.right-3 .num {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.right-3 .pro-name {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="demo-Circle">
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>1500</h1>
|
||||
<p>昨日活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{1500/20000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>12000</h1>
|
||||
<p>上月活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{12000/150000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-Circle {
|
||||
display: flex;
|
||||
}
|
||||
.demo-Circle > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.demo-Circle > div:first-child {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.demo-Circle > div:last-child {
|
||||
padding-right: 10%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.demo-Circle-custom {
|
||||
& h1 {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p {
|
||||
color: #ece8e8;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: wheat;
|
||||
font-size: 14px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
& span i {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,471 @@
|
||||
var echarts = require("echarts");
|
||||
let chartLeft1 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"商超门店",
|
||||
"教育培训",
|
||||
"房地产",
|
||||
"生活服务",
|
||||
"汽车销售",
|
||||
"旅游酒店",
|
||||
"五金建材"
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [200, 600, 300, 900, 1500, 1200, 600],
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
let chartLeft2 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"07.01",
|
||||
"07.02",
|
||||
"07.03",
|
||||
"07.04",
|
||||
"07.05",
|
||||
"07.06",
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// rotate:50,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
], series: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "销量",
|
||||
data: [1200, 800, 300, 500, 560, 220],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: "bar",
|
||||
name: "订单",
|
||||
data: [1000, 750, 380, 450, 450, 120],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#46d000",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartLeft3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "-5px",
|
||||
right: "3%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
data: ['周一', '周二', '周三', '周四', '周五']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
barWidth: "55%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
},
|
||||
data: [120, 302, 400, 200, 700]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartRight1 = {
|
||||
title: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
|
||||
legend: {
|
||||
top: "0%",
|
||||
icon: "roundRect",
|
||||
data: ["销售订单", "退货订单", "折扣订单"],
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {}
|
||||
},
|
||||
grid: {
|
||||
left: "10",
|
||||
top: "20",
|
||||
right: "10",
|
||||
bottom: "10",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.2)"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
"2020.06.15",
|
||||
"2020.06.16",
|
||||
"2020.06.17",
|
||||
"2020.06.18",
|
||||
"2020.06.19",
|
||||
"2020.06.20",
|
||||
"2020.06.21",
|
||||
"2020.06.22"
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisTick: { show: false },
|
||||
minInterval: 60,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "销售订单",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#45d4ba",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#83cddc"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#bfdffbb5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [5, 22, 150, 54, 1, 230, 4, 1]
|
||||
},
|
||||
{
|
||||
name: "退货订单",
|
||||
type: "line",
|
||||
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#04a710",
|
||||
width: 1
|
||||
}, //
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0cbf22"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#b8f7d1b5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [10, 150, 1, 250, 20, 100, 10, 150]
|
||||
},
|
||||
{
|
||||
name: "折扣订单",
|
||||
type: "line",
|
||||
|
||||
lineStyle: {
|
||||
color: "#0864c3",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#29d7ff"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#34ccef85"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [100, 2, 260, 1, 200, 30, 101, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -0,0 +1,197 @@
|
||||
|
||||
.big-data-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #1400a8;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
.head {
|
||||
height: 75px;
|
||||
/* height: 1.05rem; */
|
||||
background: url(./head_bg.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* font-size: .4rem; */
|
||||
/* line-height: .8rem; */
|
||||
line-height: 71px;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
/* margin: 5px 15px;
|
||||
height:100%; */
|
||||
|
||||
margin: 0px 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 76px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.data-container > div {
|
||||
float: left;
|
||||
/* border: 1px solid white; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-center {
|
||||
padding: 0 0.9rem;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// .center-top{
|
||||
// height: 210px;
|
||||
// background: red;
|
||||
// }
|
||||
.chart-center{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.chart-center{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// background: white;
|
||||
}
|
||||
.data-left,
|
||||
.data-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-left-item,
|
||||
.data-right-item,.center-top,.center-top-num,.chart-center {
|
||||
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||
padding: 0 0.2rem 0.4rem 0.15rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
margin-bottom: 0.15rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.data-foot-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.data-foot-line:before,
|
||||
.data-foot-line:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-bottom: 2px solid #02a6b5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.data-foot-line:before {
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxall:after,
|
||||
.data-foot-line:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.boxall:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:before,
|
||||
.data-right-item:before,
|
||||
.center-top-num:before,
|
||||
.center-top:before{
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:after,
|
||||
.data-right-item:after,
|
||||
.center-top-num:after,
|
||||
.center-top:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left,
|
||||
.data-right {
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
.data-left > .data-left-item,
|
||||
.data-right > .data-right-item {
|
||||
flex: 1;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.data-center .title,
|
||||
.data-left > .data-left-item .title,
|
||||
.data-right > .data-right-item .title {
|
||||
/* font-size: .2rem; */
|
||||
font-size: 1rem;
|
||||
padding: 7px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* line-height: .5rem; */
|
||||
}
|
||||
|
||||
.data-center .chart-center{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-top-num{
|
||||
height: 80px;
|
||||
padding-top: 7px;
|
||||
margin-bottom: 0.8rem;
|
||||
display: flex;
|
||||
.item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.text{
|
||||
color: #fcf0d8;
|
||||
font-size: 14px;
|
||||
}
|
||||
.num{
|
||||
font-size: 34px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
font-weight: bold;
|
||||
color: #67caca;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user