← Back to branch summary

~irvinamaya/sged/sged

« back to all changes in this revision

Viewing changes to SGED_Project/templates/echarts-5.4.2/test/graphicRemove.html

  • Committer: Irvin
  • Date: 2023-05-31 21:31:01 UTC
  • Revision ID: fa20014@ues.edu.sv-20230531213101-lg41sz0rqtvbejm2
Proyecto Finalizado

Show diffs side-by-side

added added

removed removed

Lines of Context:
SGED_Project/templates/echarts-5.4.2/test/graphicRemove.html
1
 
<!DOCTYPE html>
2
 
<!--
3
 
Licensed to the Apache Software Foundation (ASF) under one
4
 
or more contributor license agreements.  See the NOTICE file
5
 
distributed with this work for additional information
6
 
regarding copyright ownership.  The ASF licenses this file
7
 
to you under the Apache License, Version 2.0 (the
8
 
"License"); you may not use this file except in compliance
9
 
with the License.  You may obtain a copy of the License at
10
 
 
11
 
   http://www.apache.org/licenses/LICENSE-2.0
12
 
 
13
 
Unless required by applicable law or agreed to in writing,
14
 
software distributed under the License is distributed on an
15
 
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16
 
KIND, either express or implied.  See the License for the
17
 
specific language governing permissions and limitations
18
 
under the License.
19
 
-->
20
 
 
21
 
 
22
 
<html>
23
 
    <head>
24
 
        <meta charset="utf-8">
25
 
        <script src="lib/simpleRequire.js"></script>
26
 
        <script src="lib/config.js"></script>
27
 
        <script src="lib/jquery.min.js"></script>
28
 
        <script src="lib/facePrint.js"></script>
29
 
        <script src="lib/testHelper.js"></script>
30
 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
31
 
        <link rel="stylesheet" href="lib/reset.css">
32
 
    </head>
33
 
    <body>
34
 
        <style>
35
 
            h1 {
36
 
                line-height: 60px;
37
 
                height: 60px;
38
 
                background: #146402;
39
 
                text-align: center;
40
 
                font-weight: bold;
41
 
                color: #eee;
42
 
                font-size: 14px;
43
 
            }
44
 
            #main {
45
 
                width: 100%;
46
 
                height: 600px;
47
 
            }
48
 
        </style>
49
 
 
50
 
        宽度大于600时显示方块，当前宽度：<span id='wid'></span>
51
 
        <div id="main"></div>
52
 
 
53
 
 
54
 
 
55
 
        <script>
56
 
 
57
 
            var echarts;
58
 
            var chart;
59
 
            var myChart;
60
 
            var groupCategories = [];
61
 
            var groupColors = [];
62
 
 
63
 
            require([
64
 
                'echarts'
65
 
            ], function (ec) {
66
 
                echarts = ec;
67
 
 
68
 
                var option = {
69
 
                    graphic: {
70
 
                        id: 'text1',
71
 
                        type: 'rect',
72
 
                        shape: {
73
 
                            x: 0,
74
 
                            y: 0,
75
 
                            width: 100,
76
 
                            height: 100,
77
 
                        },
78
 
                        style: {
79
 
                            fill: 'red'
80
 
                        }
81
 
                    }
82
 
                };
83
 
 
84
 
                var myChart = echarts.init(document.getElementById('main'));
85
 
                myChart.setOption(option);
86
 
 
87
 
                setTimeout(function () {
88
 
                    // 删除上例中定义的 'text1' 元素。
89
 
                    myChart.setOption({
90
 
                        graphic: {
91
 
                            id: 'text1',
92
 
                            $action: 'remove'
93
 
                        }
94
 
                    });
95
 
                    // 已经删除，此步应无效。
96
 
                    // myChart.setOption({
97
 
                    //     graphic: {
98
 
                    //         id: 'text1',
99
 
                    //         $action: 'remove'
100
 
                    //     }
101
 
                    // });
102
 
                    // 删除后再添加。
103
 
                    myChart.setOption({
104
 
                        graphic: {
105
 
                            id: 'text1',
106
 
                            type: 'rect',
107
 
                            shape: {
108
 
                                x:0,
109
 
                                y:0,
110
 
                                width: 100,
111
 
                                height: 100,
112
 
                            },
113
 
                            style: {
114
 
                                fill: 'red',
115
 
                            }
116
 
                        }
117
 
                    });
118
 
                }, 1000);
119
 
 
120
 
 
121
 
                document.getElementById('wid').innerText = window.innerWidth;
122
 
 
123
 
                var hasRect;
124
 
 
125
 
                window.onresize = function() {
126
 
                    document.getElementById('wid').innerText = window.innerWidth;
127
 
                    // var option = myChart.getOption();
128
 
                    var option = {};
129
 
 
130
 
                    if (window.innerWidth < 600) {
131
 
                        if (hasRect) {
132
 
                            option.graphic = { // 删除上例中定义的 'text1' 元素。
133
 
                                id: 'text1',
134
 
                                $action: 'remove'
135
 
                            }
136
 
                            hasRect = false;
137
 
                        }
138
 
                    }
139
 
                    else {
140
 
                        option.graphic = {
141
 
                            id: 'text1',
142
 
                            type: 'rect',
143
 
                            shape: {
144
 
                                x:0,
145
 
                                y:0,
146
 
                                width: 100,
147
 
                                height: 100,
148
 
                            },
149
 
                            style: {
150
 
                                fill: 'red',
151
 
                            }
152
 
                        };
153
 
                        hasRect = true;
154
 
                    }
155
 
 
156
 
                    myChart.setOption(option);
157
 
                }
158
 
 
159
 
                // window.onresize();
160
 
 
161
 
            });
162
 
 
163
 
        </script>
164
 
    </body>
165
 
</html>
 
 
b'\\ No newline at end of file'