ECharts 地图,子区域模式


效果

代码

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts 地图,子区域模式</title>
    </style>
</head>

<body>
    <div style="height:600px;width:60%;margin:0 auto;margin-top: 50px;">
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width:100%;height:100%;"></div>
    </div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="../jquery-2.1.4.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/map'
        ],
        function(ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            window.onresize = myChart.resize;

            var itemStyle = {
                normal: {
                    label: {
                        show: true,
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            };

            var option = {
                title: {
                    text: '2012 World GDP Top 8',
                    subtext: 'from baike (Billion $)',
                    sublink: 'http://www.cmono.net',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function(params) {
                        var value = params.value + '';
                        value = value.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return params.seriesName + '<br/>' + value + ' Billion';
                    }
                },
                dataRange: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'center',
                    min: 2000,
                    max: 16000,
                    splitNumber: 0, // 分割段数,默认为5
                    text: ['16,000B', '2,000B'],
                    calculable: true,
                    itemWidth: 40,
                    color: ['orangered', 'yellow', 'lightskyblue']
                },
                series: [{
                    name: 'USA',
                    type: 'map',
                    mapType: 'world|United States of America',
                    mapLocation: {
                        x: '5%',
                        y: '10%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'United States of America',
                        value: 15684.7
                    }]
                }, {
                    name: 'China',
                    type: 'map',
                    mapType: 'world|China',
                    mapLocation: {
                        x: '30%',
                        y: '10%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    itemStyle: itemStyle,
                    data: [{
                        name: 'China',
                        value: 8227
                    }]
                }, {
                    name: 'Japan',
                    type: 'map',
                    mapType: 'world|Japan',
                    mapLocation: {
                        x: '55%',
                        y: '10%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'Japan',
                        value: 5963.9
                    }]
                }, {
                    name: 'Germany',
                    type: 'map',
                    mapType: 'world|Germany',
                    mapLocation: {
                        x: '76%',
                        y: '10%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'Germany',
                        value: 3400.5
                    }]
                }, {
                    name: 'France',
                    type: 'map',
                    mapType: 'world|France',
                    mapLocation: {
                        x: '5%',
                        y: '60%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'France',
                        value: 2608.6
                    }]
                }, {
                    name: 'United Kingdom',
                    type: 'map',
                    mapType: 'world|United Kingdom',
                    mapLocation: {
                        x: '33%',
                        y: '60%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'United Kingdom',
                        value: 2440.5
                    }]
                }, {
                    name: 'Brazil',
                    type: 'map',
                    mapType: 'world|Brazil',
                    mapLocation: {
                        x: '55%',
                        y: '60%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: 'Brazil',
                        value: 2395.9
                    }]
                }, {
                    name: '广东',
                    type: 'map',
                    mapType: 'china|广东',
                    mapLocation: {
                        x: '76%',
                        y: '65%',
                        width: '22%',
                        height: '35%'
                    },
                    itemStyle: itemStyle,
                    data: [{
                        name: '广东',
                        value: 2021.9
                    }]
                }]
            };


            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );
    </script>
</body>

</html>

知识共享许可协议
《ECharts 地图,子区域模式》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告