githubmirror/echarts

test/map.html
452 строки19 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">
        <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>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>

        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>





        <script>
            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                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)'
                    }
                };

                var option = {
                    tooltip: {},
                    title : {
                        text: '内蒙古 青海 没数据也要能被选中',
                        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',
                    series : [
                        {
                            name: 'iphone3',
                            type: 'map',
                            map: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            // zoom: 10,
                            // center: [115.97, 29.71],
                            roam: true,
                            markPoint: {
                                data: [{
                                    coord: [115.97, 29.71]
                                }]
                            },
                            label: {
                                normal: {
                                    show: true,
                                    rotate: 40,
                                    formatter: '{b}：{value|{c}}',
                                    // position: 'inside',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#777',
                                    rich: {
                                        value: {
                                            color: '#019D2D',
                                            fontSize: 14,
                                            // fontWeight: 'bold'
                                            // textBorderWidth: 2,
                                            // textBorderColor: '#000'
                                        }
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: Math.round(Math.random()*1000)},
                                {name: '天津',value: Math.round(Math.random()*1000)},
                                {name: '上海',value: Math.round(Math.random()*1000)},
                                {name: '重庆',value: Math.round(Math.random()*1000)},
                                {name: '河北',value: Math.round(Math.random()*1000)},
                                {name: '河南',value: Math.round(Math.random()*1000)},
                                {name: '云南',value: Math.round(Math.random()*1000)},
                                {name: '辽宁',value: Math.round(Math.random()*1000)},
                                {name: '黑龙江',value: Math.round(Math.random()*1000)},
                                {name: '湖南',value: Math.round(Math.random()*1000)},
                                {name: '安徽',value: Math.round(Math.random()*1000)},
                                {name: '山东',value: Math.round(Math.random()*1000)},
                                {name: '新疆',value: Math.round(Math.random()*1000)},
                                {name: '江苏',value: Math.round(Math.random()*1000)},
                                {name: '浙江',value: Math.round(Math.random()*1000)},
                                {name: '江西',value: Math.round(Math.random()*1000)},
                                {name: '湖北',value: Math.round(Math.random()*1000)},
                                {name: '广西',value: Math.round(Math.random()*1000)},
                                {name: '甘肃',value: Math.round(Math.random()*1000)},
                                {name: '山西',value: Math.round(Math.random()*1000)},
                                // {name: '内蒙古',value: Math.round(Math.random()*1000)},
                                {name: '陕西',value: Math.round(Math.random()*1000)},
                                {name: '吉林',value: Math.round(Math.random()*1000)},
                                {name: '福建',value: Math.round(Math.random()*1000)},
                                {name: '贵州',value: Math.round(Math.random()*1000)},
                                {name: '广东',value: Math.round(Math.random()*1000)},
                                // {name: '青海',value: Math.round(Math.random()*1000)},
                                {name: '西藏',value: Math.round(Math.random()*1000)},
                                {name: '四川',value: Math.round(Math.random()*1000)},
                                {name: '宁夏',value: Math.round(Math.random()*1000)},
                                {name: '海南',value: Math.round(Math.random()*1000)},
                                {name: '台湾',value: Math.round(Math.random()*1000)},
                                {name: '香港',value: Math.round(Math.random()*1000)},
                                {name: '澳门',value: Math.round(Math.random()*1000)}
                            ]
                        },
                        {
                            name: 'iphone4',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: Math.round(Math.random()*1000)},
                                {name: '天津',value: Math.round(Math.random()*1000)},
                                {name: '上海',value: Math.round(Math.random()*1000)},
                                {name: '重庆',value: Math.round(Math.random()*1000)},
                                {name: '河北',value: Math.round(Math.random()*1000)},
                                {name: '安徽',value: Math.round(Math.random()*1000)},
                                {name: '新疆',value: Math.round(Math.random()*1000)},
                                {name: '浙江',value: Math.round(Math.random()*1000)},
                                {name: '江西',value: Math.round(Math.random()*1000)},
                                {name: '山西',value: Math.round(Math.random()*1000)},
                                // {name: '内蒙古',value: 891},
                                {name: '吉林',value: Math.round(Math.random()*1000)},
                                {name: '福建',value: Math.round(Math.random()*1000)},
                                {name: '广东',value: Math.round(Math.random()*1000)},
                                {name: '西藏',value: Math.round(Math.random()*1000)},
                                {name: '四川',value: Math.round(Math.random()*1000)},
                                {name: '宁夏',value: Math.round(Math.random()*1000)},
                                {name: '香港',value: Math.round(Math.random()*1000)},
                                {name: '澳门',value: Math.round(Math.random()*1000)}
                            ]
                        },
                        {
                            name: 'iphone5',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: Math.round(Math.random()*1000)},
                                {name: '天津',value: Math.round(Math.random()*1000)},
                                {name: '上海',value: Math.round(Math.random()*1000)},
                                {name: '广东',value: Math.round(Math.random()*1000)},
                                {name: '台湾',value: Math.round(Math.random()*1000)},
                                {name: '香港',value: Math.round(Math.random()*1000)},
                                {name: '澳门',value: Math.round(Math.random()*1000)}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                    height: 550
                });

                if (chart) {
                    chart.on('click', function (param) {
                        console.log(param);
                    });
                }
            });

        </script>













        <script>

            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                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)'
                    }
                };
                var option = {
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['iphone3','iphone4','iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],
                        calculable : true
                    },
                    selectedMode: 'multiple',
                    series: [
                        {
                            name: 'iphone3',
                            type: 'map',
                            map: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            // zoom: 10,
                            // center: [115.97, 29.71],
                            roam: true,
                            label: {
                                show: true,
                                rotate: 40,
                                formatter: '{b}：{value|{c}}',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#934',
                                rich: {
                                    value: {
                                        color: '#019D2D',
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    backgroundColor: '#fcf'
                                },
                            },
                            data:[
                                {name: '北京', value: 234},
                                {name: '天津', value: 432},
                                {name: '新疆', value: 100},
                                {name: '陕西', value: 77},
                                {name: '西藏', value: 101},
                            ]
                        },
                        {
                            name: 'iphone4',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: itemStyle,
                            showLegendSymbol: true,
                            label: {
                                show: true,
                                rotate: 90,
                                formatter: '{b}：{value|{c}}',
                                backgroundColor: '#fff',
                                padding: [3, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#934',
                                rich: {
                                    value: {
                                        color: '#019D2D',
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    backgroundColor: '#fcf'
                                }
                            },
                            data:[
                                {name: '北京',value: 567},
                                {name: '河北',value: 321},
                                {name: '新疆', value: 100},
                                {name: '内蒙古', value: 99},
                                {name: '西藏', value: 101}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option,
                    // recordCanvas: true,
                    title: [
                        '1. 北京、天津、河北 rich text 正常倾斜（河北竖直）（其他 region 都没数据，显示 NaN）',
                        '2. selectedMode: "multiple"',
                        '3. hover 时标签底色变红',
                        '所有 label 样式一致（例外：没数据的 label 并不 rotate，因为这还没支持）'
                    ]
                });

                chart && chart.on('click', function (param) {
                    console.log(param);
                });
            });

        </script>












        <script>

            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                var locations = [{
                    name: '上海',
                    coord: [121.472644, 31.231706]
                }, {
                    name: '北京',
                    coord: [116.405285, 39.904989]
                }, {
                    name: '广东',
                    coord: [113.280637, 23.839463714285714]
                }];
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series: [
                        {
                            name: '中国',
                            type: 'map',
                            mapType: 'china',
                            selectedMode : 'multiple',
                            label: {
                                show: true
                            }
                        }
                    ]
                };
                var myChart = testHelper.create(echarts, 'main2', {
                    option: option,
                    height: 550,
                    title: ['Animation when changing map zoom and center']
                });
                var currentLoc = 0;
                setInterval(function () {
                    myChart.setOption({
                        series: [{
                            center: locations[currentLoc].coord,
                            zoom: 4,
                            data: [
                                {name: locations[currentLoc].name, selected: true}
                            ],
                            animationDurationUpdate: 1000,
                            animationEasingUpdate: 'cubicInOut'
                        }]
                    });
                    currentLoc = (currentLoc + 1) % locations.length;
                }, 2000);

            });

        </script>



    </body>
</html>