首页图表
This commit is contained in:
zCans
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div :class="className" :id="dailyTrafficChart.isHistory ? 'history-traffic-div' : 'daily-traffic-div'" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
},
|
||||
dailyTrafficChart: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
upload: 90, // 上行
|
||||
download: 100, // 下行
|
||||
isHistory: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartDom: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chartDom.dispose()
|
||||
this.chartDom = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const isHistory = this.dailyTrafficChart.isHistory
|
||||
this.chartDom = document.getElementById(isHistory ? 'history-traffic-div' : 'daily-traffic-div')
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: isHistory ? '历史流量' : '今日流量',
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: isHistory ? '历史流量' : '今日流量',
|
||||
type: 'pie',
|
||||
radius: '68%',
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
formatter: (data) => {
|
||||
return `${data.name}${data.value > 1000 ? '：\n\n' : '：'}${data.value}`
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.dailyTrafficChart.upload,
|
||||
name: '上行'
|
||||
},
|
||||
{
|
||||
value: this.dailyTrafficChart.download,
|
||||
name: '下行'
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div :class="className" id="license-div" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
},
|
||||
licenseChart: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
onLine: 90, // 进度条最大值
|
||||
total: 100 // 当前进度
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartDom: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chartDom.dispose()
|
||||
this.chartDom = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chartDom = document.getElementById('license-div')
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: this.licenseChart.onLine,
|
||||
subtext: 'License在线数',
|
||||
left: 'center',
|
||||
top: '32%',
|
||||
textStyle: {
|
||||
fontSize: 22,
|
||||
fontWeight: 800,
|
||||
color: '#c23531',
|
||||
align: 'center'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
}
|
||||
// bottom:'0'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 第一张圆环
|
||||
name: 'License',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 隐藏圆环上文字
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
// value当前进度 + 颜色
|
||||
{
|
||||
name: '在线数',
|
||||
value: this.licenseChart.onLine
|
||||
},
|
||||
{
|
||||
name: '离线数',
|
||||
value: this.licenseChart.total - this.licenseChart.onLine
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div :class="className" id="port-mapping-div" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
},
|
||||
portMappingChart: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
onLine: 90, // 进度条最大值
|
||||
total: 100 // 当前进度
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartDom: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chartDom.dispose()
|
||||
this.chartDom = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chartDom = document.getElementById('port-mapping-div')
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: this.portMappingChart.onLine,
|
||||
subtext: '端口映射在线数',
|
||||
left: 'center',
|
||||
top: '32%',
|
||||
textStyle: {
|
||||
fontSize: 22,
|
||||
fontWeight: 800,
|
||||
color: '#c23531',
|
||||
align: 'center'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
}
|
||||
// bottom:'0'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 第一张圆环
|
||||
name: '端口映射',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 隐藏圆环上文字
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
// value当前进度 + 颜色
|
||||
{
|
||||
name: '在线数',
|
||||
value: this.portMappingChart.onLine
|
||||
},
|
||||
{
|
||||
name: '离线数',
|
||||
value: this.portMappingChart.total - this.portMappingChart.onLine
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div id="port-mapping-div" :style="{height:height+'px',width:width}">
|
||||
<el-table
|
||||
:data="tableChart"
|
||||
style="width: 100%"
|
||||
:default-sort = "{prop: 'date', order: 'descending'}"
|
||||
:height="height"
|
||||
>
|
||||
<el-table-column prop="date" label="日期" sortable />
|
||||
<el-table-column prop="name" label="姓名" sortable />
|
||||
<el-table-column prop="address" label="地址" sortable show-overflow-tooltip/>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '340'
|
||||
},
|
||||
tableChart: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div :class="className" id="traffic-sum-div" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '380px'
|
||||
},
|
||||
licenseChart: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
onLine: 90, // 进度条最大值
|
||||
total: 100 // 当前进度
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartDom: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chartDom.dispose()
|
||||
this.chartDom = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chartDom = document.getElementById('traffic-sum-div')
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: '今日流量折线图',
|
||||
subtext: '当日0-24时'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['上行', '下行'],
|
||||
left: 'right'
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上行',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '下行',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner></github-corner>
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData"></line-chart>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart></raddar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart></pie-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart></bar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table></transaction-table>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<todo-list></todo-list>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<box-card></box-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +1,107 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner></github-corner>
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData"></line-chart>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart></raddar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart></pie-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart></bar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table></transaction-table>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<license-chart :licenseChart="echartsData.licenseChart"/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<port-mapping-chart :portMappingChart="echartsData.portMappingChart"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<daily-traffic-chart :dailyTrafficChart="echartsData.dailyTrafficChart"/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<daily-traffic-chart :dailyTrafficChart="echartsData.historyTrafficChart"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<todo-list></todo-list>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<el-col :span="24">
|
||||
<table-chart :tableChart="echartsData.tableChart"/>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<box-card></box-card>
|
||||
</el-row>
|
||||
<el-row class="line-chart">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<traffic-sum-chart/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
import LicenseChart from './components/LicenseChart'
|
||||
import PortMappingChart from './components/PortMappingChart'
|
||||
import DailyTrafficChart from './components/DailyTrafficChart'
|
||||
import TableChart from './components/TableChart'
|
||||
import TrafficSumChart from './components/TrafficSumChart'
|
||||
|
||||
const echartsData = {
|
||||
licenseChart: {
|
||||
total: 100,
|
||||
onLine: 80
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
portMappingChart: {
|
||||
total: 100,
|
||||
onLine: 25
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
dailyTrafficChart: {
|
||||
upload: 300,
|
||||
download: 680,
|
||||
isHistory: false
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
historyTrafficChart: {
|
||||
upload: 4100,
|
||||
download: 9520,
|
||||
isHistory: true
|
||||
},
|
||||
tableChart: [
|
||||
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
|
||||
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
|
||||
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
|
||||
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
|
||||
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
|
||||
]
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
components: { TrafficSumChart, TableChart, DailyTrafficChart, PortMappingChart, LicenseChart },
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
echartsData: echartsData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
min-height: calc(100vh - 85px);
|
||||
padding: 16px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
.line-chart {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user