admin
2024-08-28 c2e92c3bd4fc134b27ba6a6271f63b032b2b9d99
提交 | 用户 | 时间
e57a89 1 <template>
2   <div class="dashboard-editor-container">
3
4     <panel-group @handleSetLineChartData="handleSetLineChartData" />
5
6     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
7       <line-chart :chart-data="lineChartData" />
8     </el-row>
9
10     <el-row :gutter="32">
11       <el-col :xs="24" :sm="24" :lg="8">
12         <div class="chart-wrapper">
13           <raddar-chart />
14         </div>
15       </el-col>
16       <el-col :xs="24" :sm="24" :lg="8">
17         <div class="chart-wrapper">
18           <pie-chart />
19         </div>
20       </el-col>
21       <el-col :xs="24" :sm="24" :lg="8">
22         <div class="chart-wrapper">
23           <bar-chart />
24         </div>
25       </el-col>
26     </el-row>
27
28     
29   </div>
30 </template>
31
32 <script>
33 import PanelGroup from './dashboard/PanelGroup'
34 import LineChart from './dashboard/LineChart'
35 import RaddarChart from './dashboard/RaddarChart'
36 import PieChart from './dashboard/PieChart'
37 import BarChart from './dashboard/BarChart'
38
39 const lineChartData = {
40   newVisitis: {
41     expectedData: [100, 120, 161, 134, 105, 160, 165],
42     actualData: [120, 82, 91, 154, 162, 140, 145]
43   },
44   messages: {
45     expectedData: [200, 192, 120, 144, 160, 130, 140],
46     actualData: [180, 160, 151, 106, 145, 150, 130]
47   },
48   purchases: {
49     expectedData: [80, 100, 121, 104, 105, 90, 100],
50     actualData: [120, 90, 100, 138, 142, 130, 130]
51   },
52   shoppings: {
53     expectedData: [130, 140, 141, 142, 145, 150, 160],
54     actualData: [120, 82, 91, 154, 162, 140, 130]
55   }
56 }
57
58 export default {
59   name: 'Index',
60   components: {
61     PanelGroup,
62     LineChart,
63     RaddarChart,
64     PieChart,
65     BarChart
66   },
67   data() {
68     return {
69       lineChartData: lineChartData.newVisitis
70     }
71   },
72   methods: {
73     handleSetLineChartData(type) {
74       this.lineChartData = lineChartData[type]
75     }
76   }
77 }
78 </script>
79
80 <style lang="scss" scoped>
81 .dashboard-editor-container {
82   padding: 32px;
83   background-color: rgb(240, 242, 245);
84   position: relative;
85
86   .chart-wrapper {
87     background: #fff;
88     padding: 16px 16px 0;
89     margin-bottom: 32px;
90   }
91 }
92
93 @media (max-width:1024px) {
94   .chart-wrapper {
95     padding: 8px;
96   }
97 }
98 </style>