xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .split {
                line-height: 60px;
                height: 60px;
                background: #333;
                text-align: center;
                font-weight: bold;
                font-size: 20px;
                color: #fff;
            }
            .block {
                position: relative;
            }
            body {
                background: #555;
            }
            body .main {
                height: 550px;
                margin-right: 220px;
                margin-left: 20px;
            }
            .panel {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 200px;
                background: #555;
                color: #fff;
                font-size: 14px;
                font-weight: normal;
                padding: 10px;
            }
            ul.panel-desc {
                padding-left: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #777;
            }
            ul.panel-desc li {
                margin-bottom: 5px;
            }
            h3 {
                font-size: 14px;
            }

            #main2 {
                height: 450px;
            }
            #main2-st {
                position: relative;
                height: 200px;
                margin-right: 220px;
                margin-left: 20px;
            }
            strong {
                background: yellow;
                padding: 0 2px;
                border-radius: 2px;
                color: #000;
            }

            #main1-st {
                position: absolute;
                top: 0;
                right: 300px;
                height: 550px;
                width: 400px;
                z-index: 999;
            }

            .sm-settings {
                border-bottom: 1px solid #777;
                padding-bottom: 15px;
            }
            .sm-settings input {
                max-width: 50px;
            }
        </style>

        <div class="split">Candlestick</div>
        <div class="block">
            <div id="main1" class="main"></div>
            <!-- <div id="main1-st"></div> -->
            <div class="panel">
                <ul class="panel-desc">
                    <li><strong>CHECK</strong>: brush an area and drag dataZoom.</li>
                </ul>
                <div id="panel1"></div>
            </div>
        </div>

        <div class="split">Graph</div>
        <div class="block">
            <div id="main2" class="main"></div>
            <!-- <div id="main1-st"></div> -->
            <div class="panel">
                <ul class="panel-desc">
                    <li><strong>CHECK</strong>: brush an area and drag dataZoom.</li>
                </ul>
                <div id="panel2"></div>
            </div>
        </div>


        <!-- =================== 1 ===================== -->


        <script>

            /**
             * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
             * @see <http://bl.ocks.org/mbostock/4061502>
             */
            var chart;
            var data;
            var panel;

            require([
                'echarts',
                'data/stock-DJI.json'
                // 'echarts/chart/candlestick',
                // 'echarts/chart/line',
                // 'echarts/chart/bar',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoom',
                // 'echarts/component/toolbox',
                // 'echarts/component/brush',
                // 'echarts/component/markPoint',
                // 'echarts/component/markLine'
            ], function (echarts, rawData) {

                chart = echarts.init(document.getElementById('main1'), null, {

                });
                panel = document.getElementById('panel1');
                data = splitData(rawData);

                update();

                chart.on('click', function (info) {
                    if (info.data && info.componentType === 'series') {
                        alert([
                            'clicked on: ',
                            'DATA: ' + info.name,
                            'OPEN: ' + info.data[0],
                            'CLOSE: ' + info.data[1],
                            'LOWEST: ' + info.data[2],
                            'HIGHEST: ' + info.data[3],
                            'VOLUMN: ' + info.data[4]
                        ].join('\n'));
                    }
                });
            })

            function splitData(rawData) {
                var categoryData = [];
                var values = [];
                var volumns = [];
                for (var i = 0; i < rawData.length; i++) {
                    categoryData.push(rawData[i].splice(0, 1)[0]);
                    values.push(rawData[i])
                    volumns.push(rawData[i][4]);
                }
                return {
                    categoryData: categoryData,
                    values: values,
                    volumns: volumns
                };
            }

            function calculateMA(dayCount, data) {
                var result = [];
                for (var i = 0, len = data.values.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += data.values[i - j][1];
                    }
                    result.push(+(sum / dayCount).toFixed(3));
                }
                return result;
            }

            function update() {

                chart.setOption({
                    backgroundColor: '#eee',
                    animation: false,
                    legend: {
                        left: 0,
                        data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            brush: {
                                type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
                            }
                        }
                    },
                    brush: {
                        xAxisIndex: 'all',
                        brushLink: 'all',
                        outOfBrush: {
                            colorAlpha: 0.1
                        }
                    },
                    grid: [
                        {
                            left: '10%',
                            right: '10%',
                            height: 300
                        },
                        {
                            left: '10%',
                            right: '10%',
                            height: 70,
                            bottom: 80
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: data.categoryData,
                            scale: true,
                            boundaryGap : false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: data.categoryData,
                            scale: true,
                            boundaryGap : false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                            axisLabel: {show: false},
                            axisLine: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false}
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            xAxisIndex: [0, 1],
                            start: 98,
                            end: 100
                        },
                        {
                            show: true,
                            xAxisIndex: [0, 1],
                            type: 'slider',
                            bottom: 10,
                            start: 98,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: 'Dow-Jones index',
                            type: 'candlestick',
                            data: data.values,
                            itemStyle: {
                                normal: {
                                    borderColor: null,
                                    borderColor0: null
                                }
                            },
                            tooltip: {
                                formatter: function (param) {
                                    var param = param[0];
                                    return [
                                        'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                                        'Open: ' + param.data[0] + '<br/>',
                                        'Close: ' + param.data[1] + '<br/>',
                                        'Lowest: ' + param.data[2] + '<br/>',
                                        'Highest: ' + param.data[3] + '<br/>'
                                    ].join('')
                                }
                            }
                        },
                        {
                            name: 'MA5',
                            type: 'line',
                            data: calculateMA(5, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            data: calculateMA(10, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            data: calculateMA(20, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA30',
                            type: 'line',
                            data: calculateMA(30, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'Volumn',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: data.volumns
                        }
                    ]
                });

                chart.on('brushSelected', renderBrushed);

                function renderBrushed(params) {
                    var sum = 0;
                    var min = Infinity;
                    var max = -Infinity;
                    var countBySeries = [];
                    var brushComponent = params.batch[0];

                    var rawIndices = brushComponent.selected[0].dataIndex;
                    for (var i = 0; i < rawIndices.length; i++) {
                        var val = data.values[rawIndices[i]][1];
                        sum += val;
                        min = Math.min(val, min);
                        max = Math.max(val, max);
                    }

                    panel.innerHTML = [
                        '<h3>STATISTICS:</h3>',
                        'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
                        'MIN of open: ' + min.toFixed(4) + '<br>',
                        'MAX of open: ' + max.toFixed(4) + '<br>'
                    ].join(' ');

                }

                chart.dispatchAction({
                    type: 'brush',
                    areas: [
                        {
                            brushType: 'lineX',
                            coordRange: ['2016-06-02', '2016-06-20'],
                            xAxisIndex: 0
                        }
                    ]
                });
            }

        </script>


        <!-- =================== 2 ===================== -->


        <script>

            require([
                'echarts',
                'extension/dataTool',
                // 'echarts/chart/graph',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/geo',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                'theme/vintage'
            ], function (echarts, dataTool) {
                var gexf = dataTool.gexf;

                var chart = echarts.init(document.getElementById('main2'), 'vintage');

                $.get('./data/les-miserables.gexf', function (xml) {
                    var graph = gexf.parse(xml);
                    var categories = [];
                    for (var i = 0; i < 9; i++) {
                        categories[i] = {
                            name: '类目' + i
                        };
                    }
                    graph.nodes.forEach(function (node) {
                        delete node.itemStyle;
                        node.value = node.symbolSize;
                        node.label = {
                            normal: {
                                show: node.symbolSize > 30
                            },
                            emphasis: {
                                show: true
                            }
                        };
                        node.category = node.attributes['modularity_class'];
                    });
                    graph.links.forEach(function (link) {
                        delete link.lineStyle;
                    });
                    var option = {
                        tooltip: {},
                        legend: [{
                            width: '70%',
                            // selectedMode: 'single',
                            data: categories.map(function (a) {
                                return a.name;
                            })
                        }],
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        brush: {
                        },
                        series : [
                            {
                                name: 'Les Miserables',
                                type: 'graph',
                                layout: 'none',
                                data: graph.nodes,
                                links: graph.links,
                                categories: categories,
                                roam: true,
                                draggable: true,
                                itemStyle: {
                                    normal: {
                                        borderColor: '#fff',
                                        borderWidth: 2,
                                        shadowBlur: 10,
                                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                                    }
                                },
                                focusNodeAdjacency: true,
                                // edgeSymbol: ['none', 'arrow'],
                                // scaleLimit: {
                                //     min: 1.5,
                                //     max: 2
                                // },
                                label: {
                                    normal: {
                                        position: 'right',
                                        formatter: '{b}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: 'source',
                                        curveness: 0.3
                                    }
                                }
                            }
                        ]
                    };

                    chart.setOption(option);

                    var config = {
                        layout: 'none'
                    };

                    chart.on('click', function (params) {
                        console.log(params, params.data);
                    });

                });
            });
        </script>


    </body>
</html>