← 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/hoverFocus.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/hoverFocus.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
 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
26
 
        <script src="lib/simpleRequire.js"></script>
27
 
        <script src="lib/config.js"></script>
28
 
        <script src="lib/jquery.min.js"></script>
29
 
        <script src="lib/facePrint.js"></script>
30
 
        <script src="lib/testHelper.js"></script>
31
 
        <script src="data/basicChartsOptions.js"></script>
32
 
        <script src="lib/dat.gui.min.js"></script>
33
 
        <!-- <script src="ut/lib/canteen.js"></script> -->
34
 
        <link rel="stylesheet" href="lib/reset.css" />
35
 
    </head>
36
 
    <body>
37
 
        <style>
38
 
            body {
39
 
                background: #eee;
40
 
                margin: 0;
41
 
                text-align: center;
42
 
            }
43
 
            #main {
44
 
                box-sizing: border-box;
45
 
                margin: 0 auto;
46
 
                width: 800px;
47
 
                max-width: 100%;
48
 
                text-align: center;
49
 
            }
50
 
            .chart {
51
 
                height: 400px;
52
 
                border-radius: 5px;
53
 
                margin: 20px 0;
54
 
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
55
 
                background: #fff;
56
 
            }
57
 
            .dg.ac {
58
 
                text-align: left;
59
 
            }
60
 
        </style>
61
 
 
62
 
 
63
 
 
64
 
        <div id="main">
65
 
            <h1>Tests for focus and blurScope</h1>
66
 
        </div>
67
 
 
68
 
 
69
 
        <script>
70
 
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
71
 
            const charts = [];
72
 
            const seriesFocusType = {
73
 
                pie: 'self',
74
 
                funnel: 'self',
75
 
                themeRiver: 'self',
76
 
                graph: 'adjacency',
77
 
                sankey: 'adjacency',
78
 
                sunburst: 'descendant',
79
 
                treemap: 'descendant',
80
 
                tree: 'ancestor'
81
 
            }
82
 
            allChartsOptions.forEach(function (chartOption) {
83
 
                chartOption.series.forEach(function (series) {
84
 
                    series.emphasis = series.emphasis || {};
85
 
                    series.emphasis.focus = series.emphasis.focus ||  seriesFocusType[series.type] || 'series';
86
 
 
87
 
                    if (series.renderItem) {
88
 
                        const oldRenderItem = series.renderItem;
89
 
                        series.renderItem = function () {
90
 
                            const ret = oldRenderItem.apply(this, arguments);
91
 
                            ret.focus = 'self';
92
 
                            ret.blur = {
93
 
                                style: {
94
 
                                    stroke: null
95
 
                                }
96
 
                            }
97
 
                            return ret;
98
 
                        }
99
 
                    }
100
 
 
101
 
                    if (series.type === 'treemap') {
102
 
                        series.itemStyle = {
103
 
                            borderColor: 'rgba(100, 100, 200, 0.1)',
104
 
                            borderWidth: 5
105
 
                        };
106
 
                        series.upperLabel = {
107
 
                            show: true,
108
 
                            height: 15,
109
 
                            fontSize: 10
110
 
                        };
111
 
                    }
112
 
                    else if (series.type === 'line') {
113
 
                        series.endLabel = {
114
 
                            show: true
115
 
                        };
116
 
                        series.labelLayout = {
117
 
                            hideOverlap: true
118
 
                        }
119
 
                    }
120
 
                });
121
 
                const dom = document.createElement('div');
122
 
                dom.className = 'chart';
123
 
                document.querySelector('#main').appendChild(dom);
124
 
 
125
 
                const chart = echarts.init(dom);
126
 
                chart.setOption(chartOption);
127
 
                charts.push(chart);
128
 
            });
129
 
 
130
 
            // testcases about dispatchAction: 'highlight' 
131
 
            (function addDispatchActionHighlightChart(){
132
 
                // Basic options for all charts
133
 
                var polarData = [];
134
 
                for (var i = 0; i <= 100; i++) {
135
 
                    var theta = (i / 100) * 360;
136
 
                    var r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
137
 
                    polarData.push([r, theta]);
138
 
                }
139
 
 
140
 
                var seriesBlurEmphasis = {
141
 
                    focus: 'self',
142
 
                    blurScope: "series"
143
 
                };
144
 
                var globalBlurEmphasis = {
145
 
                    focus: "series",
146
 
                    blurScope: "global",
147
 
                };
148
 
                var coordinateSystemBlurEmphasis = {
149
 
                    focus: 'series',
150
 
                    blurScope: "coordinateSystem",
151
 
                };
152
 
 
153
 
                const options = [
154
 
                    ////////////// Hightlight multilple series(blurScope = 'series') //////////////
155
 
                    {
156
 
                        id: "highlightMultipleSeries(blurScope='series', focus='self')",
157
 
                        name: "Dispatch action to hightlight multiple series (with blurScope='series', focus='self')",
158
 
                        legend: {
159
 
                            top: 30,
160
 
                            data: [
161
 
                                "Direct",
162
 
                                "Mail Ad",
163
 
                                "Affiliate Ad",
164
 
                                "Video Ad",
165
 
                                "Search Engine",
166
 
                            ],
167
 
                        },
168
 
                        xAxis: {
169
 
                            type: "category",
170
 
                            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
171
 
                        },
172
 
                        yAxis: {
173
 
                            type: "value",
174
 
                        },
175
 
                        series: [
176
 
                            {
177
 
                                name: "Direct",
178
 
                                type: "line",
179
 
                                label: {
180
 
                                    show: true,
181
 
                                },
182
 
                                emphasis: seriesBlurEmphasis,
183
 
                                data: [320, 302, 301, 334, 390, 330, 320],
184
 
                            },
185
 
                            {
186
 
                                name: "Mail Ad",
187
 
                                type: "line",
188
 
                                label: {
189
 
                                    show: true,
190
 
                                },
191
 
                                emphasis:  seriesBlurEmphasis,
192
 
                                data: [120, 132, 101, 134, 90, 230, 210],
193
 
                            },
194
 
                            {
195
 
                                name: "Affiliate Ad",
196
 
                                type: "line",
197
 
                                label: {
198
 
                                    show: true,
199
 
                                },
200
 
                                emphasis: seriesBlurEmphasis,
201
 
                                data: [220, 182, 191, 234, 290, 330, 310],
202
 
                            },
203
 
                            {
204
 
                                name: "Video Ad",
205
 
                                type: "line",
206
 
                                label: {
207
 
                                    show: true,
208
 
                                },
209
 
                                emphasis: seriesBlurEmphasis,
210
 
                                data: [150, 212, 201, 154, 190, 330, 410],
211
 
                            },
212
 
                        ],
213
 
                    },
214
 
                    ////////////// Hightlight multilple series(blurScope = 'global') //////////////
215
 
                    {
216
 
                        id: "highlightMultipleSeries(blurScope='global', focus='series')",
217
 
                        name: "Dispatch action to hightlight multiple series (with blurScope='global', focus='series')",
218
 
                        legend: {
219
 
                            top: 30,
220
 
                            data: [
221
 
                                "Direct",
222
 
                                "Mail Ad",
223
 
                                "Affiliate Ad",
224
 
                                "Video Ad",
225
 
                                "Search Engine",
226
 
                            ],
227
 
                        },
228
 
                        xAxis: {
229
 
                            type: "category",
230
 
                            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
231
 
                        },
232
 
                        yAxis: {
233
 
                            type: "value",
234
 
                        },
235
 
                        series: [
236
 
                            {
237
 
                                name: "Direct",
238
 
                                type: "line",
239
 
                                label: {
240
 
                                    show: true,
241
 
                                },
242
 
                                data: [320, 302, 301, 334, 390, 330, 320],
243
 
                                emphasis: globalBlurEmphasis,
244
 
                            },
245
 
                            {
246
 
                                name: "Mail Ad",
247
 
                                type: "line",
248
 
                                label: {
249
 
                                    show: true,
250
 
                                },
251
 
                                data: [120, 132, 101, 134, 90, 230, 210],
252
 
                                emphasis: globalBlurEmphasis,
253
 
                            },
254
 
                            {
255
 
                                name: "Affiliate Ad",
256
 
                                type: "line",
257
 
                                label: {
258
 
                                    show: true,
259
 
                                },
260
 
                                data: [220, 182, 191, 234, 290, 330, 310],
261
 
                                emphasis: globalBlurEmphasis,
262
 
                            },
263
 
                            {
264
 
                                name: "Video Ad",
265
 
                                type: "line",
266
 
                                label: {
267
 
                                    show: true,
268
 
                                },
269
 
                                data: [150, 212, 201, 154, 190, 330, 410],
270
 
                                emphasis: globalBlurEmphasis,
271
 
                            },
272
 
                        ],
273
 
                    },
274
 
                    ////////////// Hightlight multilple series(blurScope = 'coordinateSystem') //////////////
275
 
                    {
276
 
                        id: "highlightMultipleSeries(blurScope='coordinateSystem', focus='series')",
277
 
                        name: "Dispatch action to hightlight multiple series (with blurScope='coordinateSystem', focus='series')",
278
 
                        legend: {
279
 
                            top: 30,
280
 
                            data: [
281
 
                                "polar",
282
 
                                "Direct",
283
 
                                "Mail Ad",
284
 
                                "Affiliate Ad",
285
 
                                "Video Ad",
286
 
                                "Search Engine",
287
 
                            ],
288
 
                        },
289
 
                        xAxis: {
290
 
                            type: "category",
291
 
                            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
292
 
                        },
293
 
                        yAxis: {
294
 
                            type: "value",
295
 
                        },
296
 
                        polar: {},
297
 
                    
298
 
                        angleAxis: {
299
 
                            type: 'value',
300
 
                            startAngle: 0
301
 
                        },
302
 
                        radiusAxis: {
303
 
                        },
304
 
                        series: [
305
 
                            {
306
 
                                coordinateSystem: 'polar',
307
 
                                name: 'polar',
308
 
                                type: 'line',
309
 
                                data: polarData,
310
 
                                emphasis: coordinateSystemBlurEmphasis,
311
 
                            },
312
 
                            {
313
 
                                name: "Direct",
314
 
                                type: "line",
315
 
                                label: {
316
 
                                    show: true,
317
 
                                },
318
 
                                data: [320, 302, 301, 334, 390, 330, 320],
319
 
                                emphasis: coordinateSystemBlurEmphasis,
320
 
                            },
321
 
                            {
322
 
                                name: "Mail Ad",
323
 
                                type: "line",
324
 
                                label: {
325
 
                                    show: true,
326
 
                                },
327
 
                                data: [120, 132, 101, 134, 90, 230, 210],
328
 
                                emphasis: coordinateSystemBlurEmphasis,
329
 
                            },
330
 
                            {
331
 
                                name: "Affiliate Ad",
332
 
                                type: "line",
333
 
                                label: {
334
 
                                    show: true,
335
 
                                },
336
 
                                data: [220, 182, 191, 234, 290, 330, 310],
337
 
                                emphasis: coordinateSystemBlurEmphasis,
338
 
                            },
339
 
                            {
340
 
                                name: "Video Ad",
341
 
                                type: "line",
342
 
                                label: {
343
 
                                    show: true,
344
 
                                },
345
 
                                data: [150, 212, 201, 154, 190, 330, 410],
346
 
                                emphasis: coordinateSystemBlurEmphasis,
347
 
                            },
348
 
                        ],
349
 
                    },]
350
 
                for(const chartOption of options){
351
 
                    const dom = document.createElement('div');
352
 
                    dom.className = 'chart';
353
 
                    document.querySelector('#main').appendChild(dom);
354
 
                    const chart = testHelper.create(echarts, dom, {
355
 
                        title: chartOption.name,
356
 
                        option: chartOption,
357
 
                        buttons: [
358
 
                            {
359
 
                                text: 'Dispatch highlight action({seriesIndex: [1, 2], dataIndex: [0,1,2]})',
360
 
                                onclick: function () {
361
 
                                        chart.dispatchAction({
362
 
                                        type: "highlight",
363
 
                                        seriesIndex: [1, 2],
364
 
                                        dataIndex: [0,1,2],
365
 
                                    });
366
 
                                }
367
 
                            },
368
 
                        ],
369
 
                    });
370
 
                    charts.push(chart);
371
 
                }
372
 
            })();
373
 
 
374
 
            const blurOpts = {
375
 
                opacity: 0.1,
376
 
                grayColor: false
377
 
            }
378
 
 
379
 
            function update() {
380
 
                allChartsOptions.forEach(function (chartOption, idx) {
381
 
                    chartOption.series.forEach(function (series) {
382
 
                        series.blur = {
383
 
                            itemStyle: {
384
 
                                color: blurOpts.grayColor ? '#aaa' : null,
385
 
                                opacity: blurOpts.opacity
386
 
                            },
387
 
                            lineStyle: {
388
 
                                color: blurOpts.grayColor ? '#aaa' : null,
389
 
                                opacity: blurOpts.opacity
390
 
                            },
391
 
                            areaStyle: {
392
 
                                color: blurOpts.grayColor ? '#aaa' : null,
393
 
                                opacity: blurOpts.opacity
394
 
                            },
395
 
                            label: {
396
 
                                color: blurOpts.grayColor ? '#aaa' : null,
397
 
                                opacity: blurOpts.opacity
398
 
                            }
399
 
                        }
400
 
                    });
401
 
                    charts[idx].setOption(chartOption);
402
 
                });
403
 
            }
404
 
 
405
 
            var gui = new dat.GUI();
406
 
            gui.add(blurOpts, 'opacity', 0, 1).onFinishChange(update);
407
 
            gui.add(blurOpts, 'grayColor').onChange(update);
408
 
 
409
 
            window.addEventListener('resize', function () {
410
 
                charts.forEach(function (chart) {
411
 
                    chart.resize();
412
 
                });
413
 
            });
414
 
        });
415
 
        </script>
416
 
 
417
 
 
418
 
    </body>
419
 
</html>
420