inleft
2022-03-02 34223b096cf6ad9d92c3702bb9529e764f523b11
commit | author | age
9bcb19 1 <template>
I 2   <div :style="{ padding: '0 0 32px 32px' }">
3     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
4     <v-chart
5       height="254"
6       :data="data"
7       :scale="scale"
8       :forceFit="true"
9       :padding="['auto', 'auto', '40', '50']">
10       <v-tooltip />
11       <v-axis />
12       <v-bar position="x*y"/>
13     </v-chart>
14   </div>
15 </template>
16
17 <script>
18 const tooltip = [
19   'x*y',
20   (x, y) => ({
21     name: x,
22     value: y
23   })
24 ]
25 const scale = [{
26   dataKey: 'x',
27   title: '日期(天)',
28   alias: '日期(天)',
29   min: 2
30 }, {
31   dataKey: 'y',
32   title: '流量(Gb)',
33   alias: '流量(Gb)',
34   min: 1
35 }]
36
37 export default {
38   name: 'Bar',
39   props: {
40     title: {
41       type: String,
42       default: ''
43     }
44   },
45   data () {
46     return {
47       data: [],
48       scale,
49       tooltip
50     }
51   },
52   created () {
53     this.getMonthBar()
54   },
55   methods: {
56     getMonthBar () {
57       this.$http.get('/analysis/month-bar')
58         .then(res => {
59           this.data = res.result
60         })
61     }
62   }
63 }
64 </script>