v-charts 的 options 使用 getOptions()而不是使用一个变量

使用 getOptions()是为了获取数据之后才进行渲染数据，v-chart 的 options 可以直接绑定一个变量,在请求数据的时候，更新变量，图表需要进行重新渲染

这里的 getOptions()也可以写在 computed 里面的。

1
2
3
<template>
    <v-charts :options="getOptions()">
</template>
点我展示js代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
getOptions() {
       return {
         grid: {
           left: 0,
           right: 0,
           top: 0,
           bottom: 0
         },
         xAxis: {
           type: 'value',
           show: false
         },
         yAxis: {
           type: 'category',
           show: false
         },
         series: [{
           name: '上月平台用户数',
           type: 'bar',
           stack: '总量',
           data: [this.userLastMonth],
           barWidth: 10,
           itemStyle: {
             color: '#45c946'
           }
         }, {
           name: '今日平台用户数',
           type: 'bar',
           stack: '总量',
           data: [this.userTodayNumber],
           itemStyle: {
             color: '#eee'
           }
         }, {
           type: 'custom',
           stack: '总量',
           data: [this.userLastMonth],
           renderItem: (params, api) => {
             const value = api.value(0)
             const endPoint = api.coord([value, 0])
             return {
               type: 'group',
               position: endPoint,
               children: [{
                 type: 'path',
                 shape: {
                   d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                   x: -5,
                   y: -20,
                   width: 10,
                   height: 10,
                   layout: 'cover'
                 },
                 style: {
                   fill: '#45c946'
                 }
               }, {
                 type: 'path',
                 shape: {
                   d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                   x: -5,
                   y: 10,
                   width: 10,
                   height: 10,
                   layout: 'cover'
                 },
                 style: {
                   fill: '#45c946'
                 }
               }]
             }
           }
         }]
       }
     }