12
12
<b-row >
13
13
<b-col xs =" 12" lg =" 7" >
14
14
<Widget
15
- title =" <h5>Apex <span class='fw-semi-bold'>Column Chart</span></h5>"
16
- close collapse customHeader
15
+ title =" <h5>Apex <span class='fw-semi-bold'>Column Chart</span></h5>"
16
+ close
17
+ collapse
18
+ customHeader
17
19
>
18
- <apexchart type =" bar" height =" 350" :series =" cd.apex.column.series" :options =" cd.apex.column.options" />
20
+ <apexchart
21
+ type =" bar"
22
+ height =" 350"
23
+ :series =" cd.apex.column.series"
24
+ :options =" cd.apex.column.options"
25
+ />
19
26
</Widget >
20
-
21
27
</b-col >
22
28
<b-col xs =" 12" lg =" 5" >
23
29
<Widget
24
- title =" <h5>Echarts <span class='fw-semi-bold'>Line Chart</span></h5>"
25
- close collapse customHeader
30
+ title =" <h5>Echarts <span class='fw-semi-bold'>Line Chart</span></h5>"
31
+ close
32
+ collapse
33
+ customHeader
26
34
>
27
- <echart :options =" cd.echarts.line" :init-options =" initEchartsOptions" style =" height : 370px " ></echart >
35
+ <echart
36
+ :options =" cd.echarts.line"
37
+ :init-options =" initEchartsOptions"
38
+ style =" height : 370px "
39
+ ></echart >
28
40
</Widget >
29
41
</b-col >
30
- <b-col xs =' 12 ' lg =' 5 ' >
42
+ <b-col xs =" 12 " lg =" 5 " >
31
43
<Widget
32
- title =" <h5>Highcharts <span class='fw-semi-bold'>Line Chart</span></h5>"
33
- close collapse customHeader
44
+ title =" <h5>Highcharts <span class='fw-semi-bold'>Line Chart</span></h5>"
45
+ close
46
+ collapse
47
+ customHeader
34
48
>
35
49
<highcharts :options =" cd.highcharts.mixed" ></highcharts >
36
- <h5 class =" mt" >Interactive <span class =" fw-semi-bold" >Sparklines</span ></h5 >
50
+ <h5 class =" mt" >
51
+ Interactive <span class =" fw-semi-bold" >Sparklines</span >
52
+ </h5 >
37
53
<b-row class =" mt" >
38
- <b-col md =' 6 ' xs =' 12 ' >
54
+ <b-col md =" 6 " xs =" 12 " >
39
55
<div class =" stats-row" >
40
56
<div class =" stat-item" >
41
57
<p class =" value5 fw-thin" >34 567</p >
42
58
<h6 class =" name text-muted m-0 fs-mini" >Overall Values</h6 >
43
59
</div >
44
60
<div class =" stat-item stat-item-mini-chart" >
45
- <Sparklines :data =" sparklineData.series" :options =" sparklineData.options1" :width =" 80" :height =" 25" ></Sparklines >
61
+ <Sparklines
62
+ :data =" sparklineData.series"
63
+ :options =" sparklineData.options1"
64
+ :width =" 80"
65
+ :height =" 25"
66
+ ></Sparklines >
46
67
</div >
47
68
</div >
48
69
</b-col >
49
- <b-col md =' 6 ' xs =' 12 ' >
70
+ <b-col md =" 6 " xs =" 12 " >
50
71
<div class =" stats-row" >
51
72
<div class =" stat-item" >
52
73
<p class =" value5 fw-thin" >34 567</p >
53
74
<h6 class =" name text-muted m-0 fs-mini" >Overall Values</h6 >
54
75
</div >
55
76
<div class =" stat-item stat-item-mini-chart" >
56
- <Sparklines :data =" sparklineData.series" :options =" sparklineData.options2" :width =" 80" :height =" 25" ></Sparklines >
77
+ <Sparklines
78
+ :data =" sparklineData.series"
79
+ :options =" sparklineData.options2"
80
+ :width =" 80"
81
+ :height =" 25"
82
+ ></Sparklines >
57
83
</div >
58
84
</div >
59
85
</b-col >
60
86
</b-row >
61
87
</Widget >
62
88
</b-col >
63
- <b-col xs =' 12 ' lg =' 7 ' >
89
+ <b-col xs =" 12 " lg =" 7 " >
64
90
<b-row >
65
91
<b-col xs =" 12" lg =" 6" >
66
92
<Widget
67
- title =" <h5>Apex <span class='fw-semi-bold'>Monochrome Pie</span></h5>"
68
- close collapse customHeader
93
+ title =" <h5>Apex <span class='fw-semi-bold'>Monochrome Pie</span></h5>"
94
+ close
95
+ collapse
96
+ customHeader
69
97
>
70
- <apexchart type =" pie" height =" 200" :series =" cd.apex.pie.series" :options =" cd.apex.pie.options" />
98
+ <apexchart
99
+ type =" pie"
100
+ height =" 200"
101
+ :series =" cd.apex.pie.series"
102
+ :options =" cd.apex.pie.options"
103
+ />
71
104
</Widget >
72
105
</b-col >
73
106
<b-col xs =" 12" lg =" 6" >
74
107
<Widget
75
- title =" <h5>Echart <span class='fw-semi-bold'>Donut Chart</span></h5>"
76
- close collapse customHeader
108
+ title =" <h5>Echart <span class='fw-semi-bold'>Donut Chart</span></h5>"
109
+ close
110
+ collapse
111
+ customHeader
77
112
>
78
- <echart :options =" cd.echarts.donut" :init-options =" initEchartsOptions" style =" height : 175px " ></echart >
113
+ <echart
114
+ :options =" cd.echarts.donut"
115
+ :init-options =" initEchartsOptions"
116
+ style =" height : 175px "
117
+ ></echart >
79
118
</Widget >
80
119
</b-col >
81
120
<b-col xs =" 12" lg =" 12" >
82
121
<Widget
83
- title =" <h5>Highcharts <span class='fw-semi-bold'>Live Chart</span></h5>"
84
- close collapse customHeader
122
+ title =" <h5>Highcharts <span class='fw-semi-bold'>Live Chart</span></h5>"
123
+ close
124
+ collapse
125
+ customHeader
85
126
>
86
127
<highcharts :options =" ld" ref =" highchart" ></highcharts >
87
128
</Widget >
90
131
</b-col >
91
132
<b-col xs =" 12" lg =" 12" >
92
133
<Widget
93
- title =" <h5>Echart <span class='fw-semi-bold'>River Chart</span></h5>"
94
- close collapse customHeader
134
+ title =" <h5>Echart <span class='fw-semi-bold'>River Chart</span></h5>"
135
+ close
136
+ collapse
137
+ customHeader
95
138
>
96
- <echart :options =" cd.echarts.river" :init-options =" initEchartsOptions" style =" height : 350px ;" ></echart >
139
+ <echart
140
+ :options =" cd.echarts.river"
141
+ :init-options =" initEchartsOptions"
142
+ style =" height : 350px ;"
143
+ ></echart >
97
144
</Widget >
98
145
</b-col >
99
146
</b-row >
102
149
</template >
103
150
104
151
<script >
105
- import Widget from " @/components/Widget/Widget" ;
106
- import {chartData , liveChart , liveChartInterval } from ' ./mock' ;
152
+ import Widget from ' @/components/Widget/Widget' ;
153
+ import { chartData , liveChart , liveChartInterval } from ' ./mock' ;
107
154
108
155
import ECharts from ' vue-echarts/components/ECharts' ;
109
156
import ' echarts/lib/chart/line' ;
@@ -119,46 +166,46 @@ exporting(Highcharts);
119
166
exportData (Highcharts);
120
167
121
168
import { Chart } from ' highcharts-vue' ;
122
- import Sparklines from ' ../../components/Sparklines/Sparklines'
169
+ import Sparklines from ' ../../components/Sparklines/Sparklines' ;
123
170
124
171
export default {
125
- name: " Charts" ,
172
+ name: ' Charts' ,
126
173
components: { Widget, echart: ECharts, highcharts: Chart, Sparklines },
127
174
data () {
128
175
return {
129
176
cd: chartData,
130
177
ld: liveChart,
131
178
initEchartsOptions: {
132
- renderer: ' canvas'
133
- }
179
+ renderer: ' canvas' ,
180
+ },
134
181
};
135
182
},
136
183
computed: {
137
184
sparklineData () {
138
185
return {
139
- series: [{data: [1 , 7 , 3 , 5 , 7 , 8 ]}],
186
+ series: [{ data: [1 , 7 , 3 , 5 , 7 , 8 ] }],
140
187
options1: {
141
188
colors: [this .appConfig .colors .green ],
142
189
plotOptions: {
143
190
bar: {
144
- columnWidth: ' 50%'
145
- }
146
- }
191
+ columnWidth: ' 50%' ,
192
+ },
193
+ },
147
194
},
148
195
options2: {
149
196
colors: [this .appConfig .colors .red ],
150
197
plotOptions: {
151
198
bar: {
152
- columnWidth: ' 50%'
153
- }
154
- }
155
- }
156
- }
157
- }
199
+ columnWidth: ' 50%' ,
200
+ },
201
+ },
202
+ },
203
+ };
204
+ },
158
205
},
159
206
beforeDestroy () {
160
207
clearInterval (liveChartInterval);
161
- }
208
+ },
162
209
};
163
210
</script >
164
211
0 commit comments