Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1
jQuery(document).ready(function() {
2
    // ECHARTS
3
    require.config({
4
        paths: {
5
            echarts: '../assets/global/plugins/echarts/'
6
        }
7
    });
8
 
9
    // DEMOS
10
    require(
11
        [
12
            'echarts',
13
            'echarts/chart/bar',
14
            'echarts/chart/chord',
15
            'echarts/chart/eventRiver',
16
            'echarts/chart/force',
17
            'echarts/chart/funnel',
18
            'echarts/chart/gauge',
19
            'echarts/chart/heatmap',
20
            'echarts/chart/k',
21
            'echarts/chart/line',
22
            'echarts/chart/map',
23
            'echarts/chart/pie',
24
            'echarts/chart/radar',
25
            'echarts/chart/scatter',
26
            'echarts/chart/tree',
27
            'echarts/chart/treemap',
28
            'echarts/chart/venn',
29
            'echarts/chart/wordCloud'
30
        ],
31
        function(ec) {
32
            //--- BAR ---
33
            var myChart = ec.init(document.getElementById('echarts_bar'));
34
            myChart.setOption({
35
                tooltip: {
36
                    trigger: 'axis'
37
                },
38
                legend: {
39
                    data: ['Cost', 'Expenses']
40
                },
41
                toolbox: {
42
                    show: true,
43
                    feature: {
44
                        mark: {
45
                            show: true
46
                        },
47
                        dataView: {
48
                            show: true,
49
                            readOnly: false
50
                        },
51
                        magicType: {
52
                            show: true,
53
                            type: ['line', 'bar']
54
                        },
55
                        restore: {
56
                            show: true
57
                        },
58
                        saveAsImage: {
59
                            show: true
60
                        }
61
                    }
62
                },
63
                calculable: true,
64
                xAxis: [{
65
                    type: 'category',
66
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
67
                }],
68
                yAxis: [{
69
                    type: 'value',
70
                    splitArea: {
71
                        show: true
72
                    }
73
                }],
74
                series: [{
75
                    name: 'Cost',
76
                    type: 'bar',
77
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
78
                }, {
79
                    name: 'Expenses',
80
                    type: 'bar',
81
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
82
                }]
83
            });
84
 
85
            // --- LINE ---
86
            var myChart2 = ec.init(document.getElementById('echarts_line'));
87
            myChart2.setOption({
88
                title: {
89
                    text: 'Weekly Weather',
90
                    subtext: 'Lorem ipsum'
91
                },
92
                tooltip: {
93
                    trigger: 'axis'
94
                },
95
                legend: {
96
                    data: ['High', 'Low']
97
                },
98
                toolbox: {
99
                    show: true,
100
                    feature: {
101
                        mark: {
102
                            show: true
103
                        },
104
                        dataView: {
105
                            show: true,
106
                            readOnly: false
107
                        },
108
                        magicType: {
109
                            show: true,
110
                            type: ['line', 'bar']
111
                        },
112
                        restore: {
113
                            show: true
114
                        },
115
                        saveAsImage: {
116
                            show: true
117
                        }
118
                    }
119
                },
120
                calculable: true,
121
                xAxis: [{
122
                    type: 'category',
123
                    boundaryGap: false,
124
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
125
                }],
126
                yAxis: [{
127
                    type: 'value',
128
                    axisLabel: {
129
                        formatter: '{value} °C'
130
                    }
131
                }],
132
                series: [{
133
                    name: 'High',
134
                    type: 'line',
135
                    data: [11, 11, 15, 13, 12, 13, 10],
136
                    markPoint: {
137
                        data: [{
138
                            type: 'max',
139
                            name: 'Max'
140
                        }, {
141
                            type: 'min',
142
                            name: 'Min'
143
                        }]
144
                    },
145
                    markLine: {
146
                        data: [{
147
                            type: 'average',
148
                            name: 'Mean'
149
                        }]
150
                    }
151
                }, {
152
                    name: 'Low',
153
                    type: 'line',
154
                    data: [1, -2, 2, 5, 3, 2, 0],
155
                    markPoint: {
156
                        data: [{
157
                            name: 'Lowest',
158
                            value: -2,
159
                            xAxis: 1,
160
                            yAxis: -1.5
161
                        }]
162
                    },
163
                    markLine: {
164
                        data: [{
165
                            type: 'average',
166
                            name: 'Mean'
167
                        }]
168
                    }
169
                }]
170
            });
171
 
172
            // -- SCATTER --
173
            var myChart3 = ec.init(document.getElementById('echarts_scatter'));
174
            myChart3.setOption({
175
                tooltip: {
176
                    trigger: 'item'
177
                },
178
                toolbox: {
179
                    show: true,
180
                    feature: {
181
                        mark: {
182
                            show: true
183
                        },
184
                        dataZoom: {
185
                            show: true
186
                        },
187
                        dataView: {
188
                            show: true,
189
                            readOnly: false
190
                        },
191
                        restore: {
192
                            show: true
193
                        },
194
                        saveAsImage: {
195
                            show: true
196
                        }
197
                    }
198
                },
199
                dataRange: {
200
                    min: 0,
201
                    max: 100,
202
                    y: 'center',
203
                    text: ['High', 'Low'],
204
                    color: ['lightgreen', 'yellow'],
205
                    calculable: true
206
                },
207
                xAxis: [{
208
                    type: 'value',
209
                    scale: true
210
                }],
211
                yAxis: [{
212
                    type: 'value',
213
                    position: 'right',
214
                    scale: true
215
                }],
216
                animation: false,
217
                series: [{
218
                    name: 'scatter1',
219
                    type: 'scatter',
220
                    symbolSize: 5,
221
                    data: (function() {
222
                        var d = [];
223
                        var len = 500;
224
                        var value;
225
                        while (len--) {
226
                            value = (Math.random() * 100).toFixed(2) - 0;
227
                            d.push([
228
                                (Math.random() * value + value).toFixed(2) - 0, (Math.random() * value).toFixed(2) - 0,
229
                                value
230
                            ]);
231
                        }
232
                        return d;
233
                    })()
234
                }]
235
            });
236
 
237
            // -- CANDLESTICK --
238
            var myChart4 = ec.init(document.getElementById('echarts_candle'));
239
            myChart4.setOption({
240
                tooltip: {
241
                    trigger: 'axis',
242
                    formatter: function(params) {
243
                        var res = params[0].seriesName + ' ' + params[0].name;
244
                        res += '<br/>  Opening : ' + params[0].value[0] + '  Highest : ' + params[0].value[3];
245
                        res += '<br/>  Closing : ' + params[0].value[1] + '  Lowest : ' + params[0].value[2];
246
                        return res;
247
                    }
248
                },
249
                legend: {
250
                    data: ['Composite Index']
251
                },
252
                toolbox: {
253
                    show: true,
254
                    feature: {
255
                        mark: {
256
                            show: true
257
                        },
258
                        dataZoom: {
259
                            show: true
260
                        },
261
                        dataView: {
262
                            show: true,
263
                            readOnly: false
264
                        },
265
                        restore: {
266
                            show: true
267
                        },
268
                        saveAsImage: {
269
                            show: true
270
                        }
271
                    }
272
                },
273
                dataZoom: {
274
                    show: true,
275
                    realtime: true,
276
                    start: 0,
277
                    end: 50
278
                },
279
                xAxis: [{
280
                    type: 'category',
281
                    boundaryGap: true,
282
                    axisTick: {
283
                        onGap: false
284
                    },
285
                    splitLine: {
286
                        show: false
287
                    },
288
                    data: [
289
                        "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
290
                        "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
291
                        "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
292
                        "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
293
                        "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
294
                        "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
295
                        "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
296
                        "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27",
297
                        "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3",
298
                        "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
299
                        "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
300
                        "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26",
301
                        "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8",
302
                        "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15",
303
                        "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22",
304
                        "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29",
305
                        "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5",
306
                        "2013/6/6", "2013/6/7", "2013/6/13"
307
                    ]
308
                }],
309
                yAxis: [{
310
                    type: 'value',
311
                    scale: true,
312
                    boundaryGap: [0.01, 0.01]
313
                }],
314
                series: [{
315
                    name: 'Composite Index',
316
                    type: 'k',
317
                    barMaxWidth: 20,
318
                    itemStyle: {
319
                        normal: {
320
                            color: 'red', // Bar Colors
321
                            color0: 'lightgreen',
322
                            lineStyle: {
323
                                width: 2,
324
                                color: 'orange',
325
                                color0: 'green'
326
                            }
327
                        },
328
                        emphasis: {
329
                            color: 'black',
330
                            color0: 'white'
331
                        }
332
                    },
333
                    data: [ // Opening, Closing, Min, Max
334
                        {
335
                            value: [2320.26, 2302.6, 2287.3, 2362.94],
336
                            itemStyle: {
337
                                normal: {
338
                                    color0: 'blue', // Opening Fill color
339
                                    lineStyle: {
340
                                        width: 3,
341
                                        color0: 'blue' // Opening Border color
342
                                    }
343
                                },
344
                                emphasis: {
345
                                    color0: 'blue' // Opening Fill color
346
                                }
347
                            }
348
                        },
349
                        [2300, 2291.3, 2288.26, 2308.38],
350
                        [2295.35, 2346.5, 2295.35, 2346.92],
351
                        [2347.22, 2358.98, 2337.35, 2363.8],
352
                        [2360.75, 2382.48, 2347.89, 2383.76],
353
                        [2383.43, 2385.42, 2371.23, 2391.82],
354
                        [2377.41, 2419.02, 2369.57, 2421.15],
355
                        [2425.92, 2428.15, 2417.58, 2440.38],
356
                        [2411, 2433.13, 2403.3, 2437.42],
357
                        [2432.68, 2434.48, 2427.7, 2441.73],
358
                        [2430.69, 2418.53, 2394.22, 2433.89],
359
                        [2416.62, 2432.4, 2414.4, 2443.03],
360
                        [2441.91, 2421.56, 2415.43, 2444.8],
361
                        [2420.26, 2382.91, 2373.53, 2427.07],
362
                        [2383.49, 2397.18, 2370.61, 2397.94],
363
                        [2378.82, 2325.95, 2309.17, 2378.82],
364
                        [2322.94, 2314.16, 2308.76, 2330.88],
365
                        [2320.62, 2325.82, 2315.01, 2338.78],
366
                        [2313.74, 2293.34, 2289.89, 2340.71],
367
                        [2297.77, 2313.22, 2292.03, 2324.63],
368
                        [2322.32, 2365.59, 2308.92, 2366.16],
369
                        [2364.54, 2359.51, 2330.86, 2369.65],
370
                        [2332.08, 2273.4, 2259.25, 2333.54],
371
                        [2274.81, 2326.31, 2270.1, 2328.14],
372
                        [2333.61, 2347.18, 2321.6, 2351.44],
373
                        [2340.44, 2324.29, 2304.27, 2352.02],
374
                        [2326.42, 2318.61, 2314.59, 2333.67],
375
                        [2314.68, 2310.59, 2296.58, 2320.96],
376
                        [2309.16, 2286.6, 2264.83, 2333.29],
377
                        [2282.17, 2263.97, 2253.25, 2286.33],
378
                        [2255.77, 2270.28, 2253.31, 2276.22],
379
                        [2269.31, 2278.4, 2250, 2312.08],
380
                        [2267.29, 2240.02, 2239.21, 2276.05],
381
                        [2244.26, 2257.43, 2232.02, 2261.31],
382
                        [2257.74, 2317.37, 2257.42, 2317.86],
383
                        [2318.21, 2324.24, 2311.6, 2330.81],
384
                        [2321.4, 2328.28, 2314.97, 2332],
385
                        [2334.74, 2326.72, 2319.91, 2344.89],
386
                        [2318.58, 2297.67, 2281.12, 2319.99],
387
                        [2299.38, 2301.26, 2289, 2323.48],
388
                        [2273.55, 2236.3, 2232.91, 2273.55],
389
                        [2238.49, 2236.62, 2228.81, 2246.87],
390
                        [2229.46, 2234.4, 2227.31, 2243.95],
391
                        [2234.9, 2227.74, 2220.44, 2253.42],
392
                        [2232.69, 2225.29, 2217.25, 2241.34],
393
                        [2196.24, 2211.59, 2180.67, 2212.59],
394
                        [2215.47, 2225.77, 2215.47, 2234.73],
395
                        [2224.93, 2226.13, 2212.56, 2233.04],
396
                        [2236.98, 2219.55, 2217.26, 2242.48],
397
                        [2218.09, 2206.78, 2204.44, 2226.26],
398
                        [2199.91, 2181.94, 2177.39, 2204.99],
399
                        [2169.63, 2194.85, 2165.78, 2196.43],
400
                        [2195.03, 2193.8, 2178.47, 2197.51],
401
                        [2181.82, 2197.6, 2175.44, 2206.03],
402
                        [2201.12, 2244.64, 2200.58, 2250.11],
403
                        [2236.4, 2242.17, 2232.26, 2245.12],
404
                        [2242.62, 2184.54, 2182.81, 2242.62],
405
                        [2187.35, 2218.32, 2184.11, 2226.12],
406
                        [2213.19, 2199.31, 2191.85, 2224.63],
407
                        [2203.89, 2177.91, 2173.86, 2210.58],
408
                        [2170.78, 2174.12, 2161.14, 2179.65],
409
                        [2179.05, 2205.5, 2179.05, 2222.81],
410
                        [2212.5, 2231.17, 2212.5, 2236.07],
411
                        [2227.86, 2235.57, 2219.44, 2240.26],
412
                        [2242.39, 2246.3, 2235.42, 2255.21],
413
                        [2246.96, 2232.97, 2221.38, 2247.86],
414
                        [2228.82, 2246.83, 2225.81, 2247.67],
415
                        [2247.68, 2241.92, 2231.36, 2250.85],
416
                        [2238.9, 2217.01, 2205.87, 2239.93],
417
                        [2217.09, 2224.8, 2213.58, 2225.19],
418
                        [2221.34, 2251.81, 2210.77, 2252.87],
419
                        [2249.81, 2282.87, 2248.41, 2288.09],
420
                        [2286.33, 2299.99, 2281.9, 2309.39],
421
                        [2297.11, 2305.11, 2290.12, 2305.3],
422
                        [2303.75, 2302.4, 2292.43, 2314.18],
423
                        [2293.81, 2275.67, 2274.1, 2304.95],
424
                        [2281.45, 2288.53, 2270.25, 2292.59],
425
                        [2286.66, 2293.08, 2283.94, 2301.7],
426
                        [2293.4, 2321.32, 2281.47, 2322.1],
427
                        [2323.54, 2324.02, 2321.17, 2334.33],
428
                        [2316.25, 2317.75, 2310.49, 2325.72],
429
                        [2320.74, 2300.59, 2299.37, 2325.53],
430
                        [2300.21, 2299.25, 2294.11, 2313.43],
431
                        [2297.1, 2272.42, 2264.76, 2297.1],
432
                        [2270.71, 2270.93, 2260.87, 2276.86],
433
                        [2264.43, 2242.11, 2240.07, 2266.69],
434
                        [2242.26, 2210.9, 2205.07, 2250.63],
435
                        [2190.1, 2148.35, 2126.22, 2190.1]
436
                    ],
437
                    markPoint: {
438
                        symbol: 'star',
439
                        //symbolSize:20,
440
                        itemStyle: {
441
                            normal: {
442
                                label: {
443
                                    position: 'top'
444
                                }
445
                            }
446
                        },
447
                        data: [{
448
                            name: 'Highest',
449
                            value: 2444.8,
450
                            xAxis: '2013/2/18',
451
                            yAxis: 2466
452
                        }]
453
                    }
454
                }]
455
            });
456
 
457
            // -- PIE --
458
            var myChart5 = ec.init(document.getElementById('echarts_pie'));
459
            myChart5.setOption({
460
                tooltip: {
461
                    show: true,
462
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
463
                },
464
                legend: {
465
                    orient: 'vertical',
466
                    x: 'left',
467
                    data: ['All', 'Marketing', 'Search', 'EDM', 'Partnership', 'Video', 'Social', 'Google', 'Bing', 'Others']
468
                },
469
                toolbox: {
470
                    show: true,
471
                    feature: {
472
                        mark: {
473
                            show: true
474
                        },
475
                        dataView: {
476
                            show: true,
477
                            readOnly: false
478
                        },
479
                        restore: {
480
                            show: true
481
                        },
482
                        saveAsImage: {
483
                            show: true
484
                        }
485
                    }
486
                },
487
                calculable: true,
488
                series: [{
489
                    name: 'Source',
490
                    type: 'pie',
491
                    center: ['35%', 200],
492
                    radius: 80,
493
                    itemStyle: {
494
                        normal: {
495
                            label: {
496
                                position: 'inner',
497
                                formatter: function(params) {
498
                                    return (params.percent - 0).toFixed(0) + '%'
499
                                }
500
                            },
501
                            labelLine: {
502
                                show: false
503
                            }
504
                        },
505
                        emphasis: {
506
                            label: {
507
                                show: true,
508
                                formatter: "{b}\n{d}%"
509
                            }
510
                        }
511
 
512
                    },
513
                    data: [{
514
                        value: 335,
515
                        name: 'All'
516
                    }, {
517
                        value: 679,
518
                        name: 'Marketing'
519
                    }, {
520
                        value: 1548,
521
                        name: 'Search'
522
                    }]
523
                }, {
524
                    name: 'Source',
525
                    type: 'pie',
526
                    center: ['35%', 200],
527
                    radius: [110, 140],
528
                    data: [{
529
                        value: 335,
530
                        name: 'All'
531
                    }, {
532
                        value: 310,
533
                        name: 'EDM'
534
                    }, {
535
                        value: 234,
536
                        name: 'Partnership'
537
                    }, {
538
                        value: 135,
539
                        name: 'Video'
540
                    }, {
541
                        value: 1048,
542
                        name: 'Social',
543
                        itemStyle: {
544
                            normal: {
545
                                color: (function() {
546
                                    var zrColor = require('zrender/tool/color');
547
                                    return zrColor.getRadialGradient(
548
                                        300, 200, 110, 300, 200, 140, [
549
                                            [0, 'rgba(255,255,0,1)'],
550
                                            [1, 'rgba(30,144,250,1)']
551
                                        ]
552
                                    )
553
                                })(),
554
                                label: {
555
                                    textStyle: {
556
                                        color: 'rgba(30,144,255,0.8)',
557
                                        align: 'center',
558
                                        baseline: 'middle',
559
                                        fontFamily: 'Open Sans',
560
                                        fontSize: 30,
561
                                        fontWeight: '700'
562
                                    }
563
                                },
564
                                labelLine: {
565
                                    length: 40,
566
                                    lineStyle: {
567
                                        color: '#f0f',
568
                                        width: 3,
569
                                        type: 'dotted'
570
                                    }
571
                                }
572
                            }
573
                        }
574
                    }, {
575
                        value: 251,
576
                        name: 'Google'
577
                    }, {
578
                        value: 102,
579
                        name: 'Bing',
580
                        itemStyle: {
581
                            normal: {
582
                                label: {
583
                                    show: false
584
                                },
585
                                labelLine: {
586
                                    show: false
587
                                }
588
                            },
589
                            emphasis: {
590
                                label: {
591
                                    show: true
592
                                },
593
                                labelLine: {
594
                                    show: true,
595
                                    length: 50
596
                                }
597
                            }
598
                        }
599
                    }, {
600
                        value: 147,
601
                        name: 'Others'
602
                    }]
603
                }, {
604
                    name: 'Source',
605
                    type: 'pie',
606
                    clockWise: true,
607
                    startAngle: 135,
608
                    center: ['75%', 200],
609
                    radius: [80, 120],
610
                    itemStyle:  {
611
                        normal: {
612
                            label: {
613
                                show: false
614
                            },
615
                            labelLine: {
616
                                show: false
617
                            }
618
                        },
619
                        emphasis: {
620
                            color: (function() {
621
                                var zrColor = require('zrender/tool/color');
622
                                return zrColor.getRadialGradient(
623
                                    650, 200, 80, 650, 200, 120, [
624
                                        [0, 'rgba(255,255,0,1)'],
625
                                        [1, 'rgba(255,0,0,1)']
626
                                    ]
627
                                )
628
                            })(),
629
                            label: {
630
                                show: true,
631
                                position: 'center',
632
                                formatter: "{d}%",
633
                                textStyle: {
634
                                    color: 'red',
635
                                    fontSize: '30',
636
                                    fontFamily: 'Open Sans',
637
                                    fontWeight: 'bold'
638
                                }
639
                            }
640
                        }
641
                    },
642
                    data: [{
643
                        value: 335,
644
                        name: 'All'
645
                    }, {
646
                        value: 310,
647
                        name: 'EDM'
648
                    }, {
649
                        value: 234,
650
                        name: 'Partnership'
651
                    }, {
652
                        value: 135,
653
                        name: 'Video'
654
                    }, {
655
                        value: 1548,
656
                        name: 'Search'
657
                    }],
658
                    markPoint: {
659
                        symbol: 'star',
660
                        data: [{
661
                            name: 'Max',
662
                            value: 1548,
663
                            x: '80%',
664
                            y: 50,
665
                            symbolSize: 32
666
                        }]
667
                    }
668
                }]
669
            });
670
        }
671
    );
672
});