/
area-chart.vue
75 lines (67 loc) · 2.06 KB
/
area-chart.vue
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
<template>
<div :id="id"></div>
</template>
<script>
import 'morris.js/morris'
import 'morris.js/morris.css'
import Converter from '../util/converter'
import ChartProps from './chart-mixins'
export default {
name: 'area-chart',
mixins: [ ChartProps.area ],
data () {
return {
chart: null
}
},
watch: {
data (val) {
this.$nextTick(() => {
this.chart.setData(Converter.toObject(this.data))
})
}
},
mounted () {
let options = {
element: this.id,
data: Converter.toObject(this.data),
resize: Converter.toBoolean(this.resize),
labels: Converter.toObject(this.labels),
xkey: this.xkey,
ykeys: Converter.toObject(this.ykeys),
grid: Converter.toBoolean(this.grid),
gridTextColor: this.gridTextColor,
gridTextSize: Converter.toInt(this.gridTextSize),
gridTextFamily: this.gridTextFamily,
gridTextWeight: this.gridTextWeight,
lineWidth: this.lineWidth,
pointSize: this.pointSize,
ymax: this.ymax,
ymin: this.ymin,
smooth: Converter.toBoolean(this.smooth),
hideHover: this.hideHover,
parseTime: Converter.toBoolean(this.parseTime),
postUnits: this.postUnits,
preUnits: this.preUnits,
xLabelAngle: this.xLabelAngle,
goalStrokeWidth: this.goalStrokeWidth,
eventStrokeWidth: this.eventStrokeWidth,
fillOpacity: this.fillOpacity,
behaveLikeLine: this.behaveLikeLine
}
this.addOptionAsObject('lineColors', options)
this.addOption('xLabels', options)
this.addOptionAsObject('pointFillColors', options)
this.addOptionAsObject('pointStrokeColors', options)
this.addOption('dateFormat', options)
this.addOption('xLabelFormat', options)
this.addOption('yLabelFormat', options)
this.addOptionAsObject('goals', options)
this.addOptionAsObject('goalLineColors', options)
this.addOptionAsObject('events', options)
this.addOptionAsObject('eventLineColors', options)
this.addOption('hoverCallback', options)
this.chart = Morris.Area(options)
}
}
</script>