githubmirror/echarts

test/map-grid.html
349 строк14 KB
pissang
test: use require to replace original jquery loading
10 май 2021, 09:02
10 май 2021, 09:02f07de0b
<!DOCTYPE html>
<!--
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/jquery.min.js"></script>
        <script src="lib/config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>

            var echarts;
            var chart;
            var myChart;

            require([
                'echarts',
                'data/life-expectancy.json',
                'map/js/world'
            ], function (ec, data) {

                echarts = ec;

                chart = myChart = echarts.init(document.getElementById('main'));
                var itemStyle = {
                    normal: {
                        opacity: 0.8,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                };

                var sizeFunction = function (x) {
                    var y = Math.sqrt(x / 5e8) + 0.1;
                    return y * 40;
                };
                // Schema:
                var schema = [
                    {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
                    {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
                    {name: 'Population', index: 2, text: '总人口', unit: ''},
                    {name: 'Country', index: 3, text: '国家', unit: ''}
                ];

                option = {
                    baseOption: {
                        timeline: {
                            axisType: 'category',
                            orient: 'vertical',
                            autoPlay: true,
                            inverse: true,
                            playInterval: 1000,
                            left: null,
                            right: 10,
                            top: 20,
                            bottom: 20,
                            width: 55,
                            height: null,
                            label: {
                                normal: {
                                    textStyle: {
                                        color: '#ddd'
                                    }
                                },
                                emphasis: {
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            symbol: 'none',
                            lineStyle: {
                                color: '#555'
                            },
                            checkpointStyle: {
                                color: '#bbb',
                                borderColor: '#777',
                                borderWidth: 2
                            },
                            controlStyle: {
                                showNextBtn: false,
                                showPrevBtn: false,
                                normal: {
                                    color: '#666',
                                    borderColor: '#666'
                                },
                                emphasis: {
                                    color: '#aaa',
                                    borderColor: '#aaa'
                                }
                            },
                            data: []
                        },
                        backgroundColor: '#333',
                        title: {
                            'text': data.timeline[0],
                            textAlign: 'center',
                            right: '3%',
                            top: '73%',
                            textStyle: {
                                fontSize: 100,
                                color: 'rgba(255, 255, 255, 0.9)'
                            }
                        },
                        tooltip: {
                            padding: 5,
                            backgroundColor: '#222',
                            borderColor: '#777',
                            borderWidth: 1
                        },
                        xAxis: {
                            type: 'log',
                            name: '人均收入',
                            max: 100000,
                            min: 300,
                            nameGap: 25,
                            nameLocation: 'middle',
                            nameTextStyle: {
                                fontSize: 18
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisLabel: {
                                formatter: '{value} $',
                                textStyle: {
                                    color: '#ddd'
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '平均寿命',
                            nameGap: 25,
                            max: 100,
                            nameTextStyle: {
                                color: '#ccc',
                                fontSize: 18
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value} 岁',
                                textStyle: {
                                    color: '#ddd'
                                }
                            }
                        },
                        grid: {
                            top: '40%',
                            left: 200,
                            right: 110
                        },
                        geo: {
                            top: 20,
                            left: 170,
                            right: 120,
                            height: '38%',
                            name: 'World Population (2010)',
                            type: 'map',
                            map: 'world',
                            roam: false,
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: '#aaa',
                                    areaColor: '#555'
                                },
                                emphasis: {
                                    areaColor: '#555'
                                }
                            }
                        },
                        toolbox: {
                            // orient: 'vertical',
                            top: 25,
                            left: 10,
                            itemSize: 20,
                            // itemGap: 17,
                            iconStyle: {
                                normal: {
                                    borderColor: '#eee'
                                },
                                emphasis: {
                                    borderColor: '#fffb60'
                                }
                            }
                        },
                        brush: {
                            toolbox: ['polygon', 'keep', 'clear'],
                            brushLink: 'all',
                            xAxisIndex: 0,
                            geoIndex: 0,
                            outOfBrush: {
                                opacity: .1,
                                color: '#aaa'
                            }
                        },
                        visualMap: [
                            {
                                type: 'piecewise',
                                dimension: 3,
                                categories: data.countries.map(function (item) {
                                    return item[2];
                                }),
                                left: 10,
                                bottom: 35,
                                calculable: true,
                                precision: 0.1,
                                textGap: 10,
                                itemGap: 12,
                                textStyle: {
                                    color: '#ccc'
                                },
                                inRange: {
                                    color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a', '#376956', '#c3bed4', '#495a80', '#9966cc', '#bdb76a', '#eee8ab', '#a35015', '#04dd98', '#d9b3e6']
                                },
                                outOfRange: {
                                    color: '#555'
                                }
                            }
                        ],
                        series: [
                            {
                                type: 'scatter',
                                id: 'gridScatter',
                                itemStyle: itemStyle,
                                data: data.series[0],
                                symbolSize: function(val) {
                                    return sizeFunction(val[2]);
                                },
                                tooltip: {
                                    formatter: function (obj) {
                                        var value = obj.value;
                                        return schema[3].text + '：' + value[3] + '<br>'
                                            + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                                            + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                                            + schema[2].text + '：' + value[2] + '<br>';
                                    }
                                }
                            },
                            {
                                type: 'scatter',
                                id: 'geoScatter',
                                coordinateSystem: 'geo',
                                itemStyle: {
                                    normal: {
                                        opacity: 1,
                                        shadowBlur: 5,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                },
                                data: data.countries.map(function (item) {
                                    return [item[0], item[1], 0, item[2]];
                                }),
                                symbolSize: 15,
                                tooltip: {
                                    formatter: function (obj) {
                                        var value = obj.value;
                                        return schema[3].text + '：' + value[3];
                                    }
                                }
                            }
                        ],
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'quinticInOut'
                    },
                    options: []
                };

                for (var n = 0; n < data.timeline.length; n++) {
                    option.baseOption.timeline.data.push(data.timeline[n]);
                    option.options.push({
                        title: {
                            show: true,
                            'text': data.timeline[n] + ''
                        },
                        series: {
                            id: 'gridScatter',
                            name: data.timeline[n],
                            type: 'scatter',
                            itemStyle: itemStyle,
                            data: data.series[n],
                            symbolSize: function(val) {
                                return sizeFunction(val[2]);
                            }
                        }
                    });
                }

                myChart.setOption(option);

            });

        </script>
    </body>
</html>