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
| <template>
| <div ref="scEcharts" :style="{ height: height, width: width }"></div>
| </template>
|
| <script>
| import * as echarts from 'echarts';
| import T from './echarts-theme-T.js';
|
| echarts.registerTheme('T', T);
| const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
|
| export default {
| ...echarts,
| name: 'scEcharts',
| props: {
| height: { type: String, default: '100%' },
| width: { type: String, default: '100%' },
| nodata: { type: Boolean, default: false },
| option: {
| type: Object,
| default: () => {},
| },
| },
| data() {
| return {
| isActivat: false,
| myChart: null,
| };
| },
| watch: {
| option: {
| deep: true,
| handler(v) {
| this.$nextTick(() => {
| unwarp(this.myChart).setOption(v);
| });
| },
| },
| },
| computed: {
| myOptions: function () {
| return this.option || {};
| },
| },
| activated() {
| if (!this.isActivat) {
| this.$nextTick(() => {
| this.myChart.resize();
| });
| }
| },
| deactivated() {
| this.isActivat = false;
| },
| mounted() {
| this.isActivat = true;
| this.$nextTick(() => {
| this.draw();
| });
| },
| methods: {
| draw() {
| let myChart = echarts.init(this.$refs.scEcharts, 'T');
| myChart.setOption(this.myOptions);
| this.myChart = myChart;
| window.addEventListener('resize', () => myChart.resize());
| },
| },
| };
| </script>
|
|
