test/map-contour.html - master - githubmirror/echarts

test/map-contour.html
139 строк5 KB
Ovilia
test(map): replace test cases with new map
09 дек 2024, 11:58
09 дек 2024, 11:58181842f

<!--
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">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id="main"></div>
        <script>

            require([
                'echarts',
                'map/js/china-contour',
                'map/js/china'
            ], function (echarts, contour) {
                var chart = echarts.init(document.getElementById('main'));

                var itemStyle = {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }

                chart.setOption({
                    title : {
                        text: 'iphone销量',
                        subtext: '纯属虚构',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['iphone3','iphone4','iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },
                    selectedMode: 'single',
                    geo: [
                        {
                            name: 'contour',
                            type: 'map',
                            roam: true,
                            map: 'china-contour',
                            itemStyle: {
                                borderWidth: 3,
                                borderColor: '#000',
                                areaColor: 'transparent',
                                borderJoin: 'round',
                                emphasis: {
                                    areaColor: 'transparent'
                                }
                            },
                            center: [104.2, 36],
                            zoom: 1
                        },
                        {
                            name: 'detail',
                            type: 'map',
                            map: 'china',
                            data: [],
                            silent: true,
                            roam: true,
                            regions: [
                                '南海',
                                '香港特别行政区',
                                '海南省海域与广东省海域',
                                '江苏省与上海市沿江',
                                '浙江省海域与上海市海域',
                                '浙江省海域与福建省海域',
                                '广东省海域与福建省海域',
                                ''
                            ].map(name => {
                                return {
                                    name: name + '境界线',
                                    itemStyle: {
                                        borderColor: '#000',
                                        borderWidth: 2
                                    }
                                };
                            }).concat({
                                name: '新疆维吾尔自治区附近境界线',
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 4
                                },
                            }),
                            center: [104.2, 36],
                            zoom: 1.415
                        }
                    ],
                    series : []
                });
            });

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