|
|
@@ -1,8 +1,8 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
- <div ref="echart" ></div>
|
|
|
2
|
+ <v-chart :options="options" />
|
|
3
|
3
|
</template>
|
|
4
|
4
|
<script>
|
|
5
|
|
-import Echarts from "echarts";
|
|
|
5
|
+import ECharts from 'vue-echarts'
|
|
6
|
6
|
|
|
7
|
7
|
export default {
|
|
8
|
8
|
name: "XLine",
|
|
|
@@ -12,9 +12,11 @@ export default {
|
|
12
|
12
|
default: () => {},
|
|
13
|
13
|
},
|
|
14
|
14
|
},
|
|
|
15
|
+ components: {
|
|
|
16
|
+ 'v-chart': ECharts,
|
|
|
17
|
+ },
|
|
15
|
18
|
data() {
|
|
16
|
19
|
return {
|
|
17
|
|
- chart: undefined,
|
|
18
|
20
|
defaultOpts: {
|
|
19
|
21
|
title: {
|
|
20
|
22
|
text: "新增用户"
|
|
|
@@ -55,38 +57,12 @@ export default {
|
|
55
|
57
|
}
|
|
56
|
58
|
};
|
|
57
|
59
|
},
|
|
58
|
|
- watch: {
|
|
59
|
|
- value: {
|
|
60
|
|
- handler(val) {
|
|
61
|
|
- this.renderChart(val)
|
|
62
|
|
- },
|
|
63
|
|
- immediate: true,
|
|
64
|
|
- deep: true,
|
|
65
|
|
- },
|
|
66
|
|
- },
|
|
67
|
|
- mounted() {
|
|
68
|
|
- this.renderChart(this.value || {})
|
|
69
|
|
- },
|
|
70
|
|
- methods: {
|
|
71
|
|
- initChats () {
|
|
72
|
|
- if (!this.chart && this.$refs.echart) {
|
|
73
|
|
- this.chart = Echarts.init(this.$refs.echart);
|
|
74
|
|
- }
|
|
75
|
|
-
|
|
76
|
|
- if (this.chart) {
|
|
77
|
|
- return Promise.resolve(this.chart)
|
|
78
|
|
- } else {
|
|
79
|
|
- return Promise.reject()
|
|
|
60
|
+ computed: {
|
|
|
61
|
+ options() {
|
|
|
62
|
+ return {
|
|
|
63
|
+ ...this.defaultOpts,
|
|
|
64
|
+ ...(this.value || {}),
|
|
80
|
65
|
}
|
|
81
|
|
- },
|
|
82
|
|
- renderChart(val) {
|
|
83
|
|
- this.initChats().then((echart) => {
|
|
84
|
|
- // 绘制图表
|
|
85
|
|
- echart.setOption({
|
|
86
|
|
- ...this.defaultOpts,
|
|
87
|
|
- ...val
|
|
88
|
|
- });
|
|
89
|
|
- })
|
|
90
|
66
|
}
|
|
91
|
67
|
}
|
|
92
|
68
|
};
|
