|
@@ -0,0 +1,134 @@
|
|
|
+<template>
|
|
|
+ <div class="top-middle-cmp" style="height: 300px">
|
|
|
+ <div class="chart-name">
|
|
|
+ 近30天数据统计
|
|
|
+ <dv-decoration-3 style="width:200px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <dv-charts :option="option" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'TopMiddleCmp',
|
|
|
+ props: {
|
|
|
+ curObj: Object,
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ option: {
|
|
|
+ legend: {
|
|
|
+ data: ['近30天登录'],
|
|
|
+ textStyle: {
|
|
|
+ fill: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: [
|
|
|
+ '10/01', '10/02', '10/03', '10/04', '10/05', '10/06',
|
|
|
+ '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
|
|
|
+ '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
|
|
|
+ '10/07', '10/07', '10/08', '10/09', '10/10', '10/11',
|
|
|
+ '10/12', '10/13', '10/14', '10/15'
|
|
|
+ ],
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ style: {
|
|
|
+ stroke: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ style: {
|
|
|
+ fill: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ data: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ style: {
|
|
|
+ stroke: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ style: {
|
|
|
+ fill: '#999'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [
|
|
|
+ 99.56, 99.66, 99.84, 99.22, 99.11, 99.45,
|
|
|
+ 99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
|
|
|
+ 99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
|
|
|
+ 99.44, 99.81, 99.84, 99.32, 99.14, 99.45,
|
|
|
+ 99.15, 99.45, 99.64, 99.89
|
|
|
+ ],
|
|
|
+ type: 'line',
|
|
|
+ name: '近30天登录',
|
|
|
+ smooth: true,
|
|
|
+ lineArea: {
|
|
|
+ show: true,
|
|
|
+ gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
|
|
|
+ },
|
|
|
+ linePoint: {
|
|
|
+ radius: 4,
|
|
|
+ style: {
|
|
|
+ fill: '#00db95'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ curObj () {
|
|
|
+ let signupArr = this.curObj.day_30_signup || []
|
|
|
+ signupArr = signupArr.reverse()
|
|
|
+ let xAxisData = []
|
|
|
+ let seriesData = []
|
|
|
+ signupArr.forEach((item, index) => {
|
|
|
+ if (index < 16) {
|
|
|
+ xAxisData.push(item.format_time)
|
|
|
+ seriesData.push(item.signup)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let option = JSON.parse(JSON.stringify(this.option))
|
|
|
+ option.xAxis.data = [...xAxisData]
|
|
|
+ option.series[0].data = [...seriesData]
|
|
|
+ console.log(option)
|
|
|
+ this.option = {...option}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // console.log(this.curObj)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.top-middle-cmp {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .chart-name {
|
|
|
+ position: absolute;
|
|
|
+ right: 70px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 20px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|