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
| <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) {
| 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(){
| var myChart = echarts.init(this.$refs.scEcharts, 'T');
| myChart.setOption(this.myOptions);
| this.myChart = myChart;
| window.addEventListener('resize', () => myChart.resize());
| }
| }
| }
| </script>
|
|
