githubmirror/echarts

test/brush2.html
538 строк18 KB
pissang
test: use require to replace original jquery loading
10 май 2021, 09:02
10 май 2021, 09:02f07de0b

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/simpleRequire.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.js'
            ], 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',
                './data/les-miserables.gexf',
                'theme/vintage'
            ], function (echarts, dataTool, xml) {
                var gexf = dataTool.gexf;

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

                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,
                            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>