1ECharts（中国地图篇）的使用

Posted 洗浄

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1ECharts（中国地图篇）的使用相关的知识，希望对你有一定的参考价值。

一、
网址：            http://echarts.baidu.com/download.html
点击：            完整
下载文件：        echarts.min.js

网址：            http://echarts.baidu.com/download-map.html
点击：            中国地图 - JS
下载文件：        china.js

二、代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
        <title>ECharts</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
        <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
    </head>
    <body>        

        <div id="china-map"></div>
        
        <script>
            var myChart = echarts.init(document.getElementById(\'china-map\'));
            var option = {
                tooltip: {
//                    show: false //不显示提示标签
                    formatter: \'{b}\', //提示标签格式
                    backgroundColor:"#ff7f50",//提示标签背景颜色
                    textStyle:{color:"#fff"} //提示标签字体颜色
                },
                series: [{
                    type: \'map\',
                    mapType: \'china\',
                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#800080"}
                        } 
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: \'#009fe8\',//区域边框颜色
                            areaColor:"#ffefd5",//区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: \'#4b0082\',
                            areaColor:"#ffdead",
                        }
                    },
                    data:[
                        {name:\'福建\', selected:true}//福建为选中状态
                    ]
                }],
            };
            
            myChart.setOption(option);
            myChart.on(\'mouseover\', function (params) {
                var dataIndex = params.dataIndex;
                console.log(params);
            });
        </script>
        
    </body>
</html>

 

三、效果图


四、修改省份标签位置：
打开china.js文件，修改"properties":{"cp":[X坐标,Y坐标],...}

 

以上是关于1ECharts（中国地图篇）的使用的主要内容，如果未能解决你的问题，请参考以下文章

使用片段的谷歌地图

谷歌地图片段显示，但没有地图

在Android Studio片段之间切换时地图片段不隐藏

Android：在drawerlayout中使用地图膨胀片段时出错

如何从片段外部清除/重置地图？

谷歌地图片段内的片段可以操纵我的地图