使用echarts简单制作中国地图

拼搏现实的明天。 2022-08-06 02:11 276阅读 0赞

网站需要一张中国地图，并且鼠标经过某个省份，该省份的省份名字显示，而且该省份的地区会变色显示。

**第一种方法：**

将每个省份的图片定位（先隐藏），拼合成一张中国地图，然后再定位省份名称，鼠标经过省份名字，添加hover事件，将对应图片显示。

**第二种方法：**

使用图形插件echarts，轻松制作。

http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包

![20141212155122850][]

echarts使用方法查看页面

http://echarts.baidu.com/doc/doc.html\#%E5%BC%95%E5%85%A5ECharts3

可以在网站上调整好需要的样式再放到本地看效果

![20141212155542437][]

**自己试验的demo如下：**

<!doctype html>  
<html>  
  
<head>  
    <meta charset="utf-8">  
    <title>echarts图形插件使用</title>  
  
</head>  
  
<body>  
    <div id="main" style="height:800px;"></div>  
    <script type="text/javascript" src="js/echarts-all.js"></script>  
    <script type="text/javascript">  
        var myChart = echarts.init(document.getElementById('main'));  
        var option = \{  
            series: \[  
                \{  
                    name: 'Map',  
                    type: 'map',  
                    mapLocation: \{  
                        x: 'left',  
                        y: 'top',  
                        height: 500  
                    \},  
                    selectedMode: 'multiple',  
                    itemStyle: \{  
                        normal: \{  
                            borderWidth: 2,  
                            borderColor: 'lightgreen',  
                            color: 'orange',  
                            label: \{  
                                show: false  
                            \}  
                        \},  
                        emphasis: \{ // 也是选中样式  
                            borderWidth: 2,  
                            borderColor: '\#fff',  
                            color: '\#32cd32',  
                            label: \{  
                                show: true,  
                                textStyle: \{  
                                    color: '\#fff'  
                                \}  
                            \}  
                        \}  
                    \},  
                    data: \[  
                        \{  
                            name: '广东',  
                            value: Math.round(Math.random() \* 1000),  
                            itemStyle: \{  
                                normal: \{  
                                    color: '\#32cd32',  
                                    label: \{  
                                        show: true,  
                                        textStyle: \{  
                                            color: '\#fff',  
                                            fontSize: 15  
                                        \}  
                                    \}  
                                \},  
                                emphasis: \{ // 也是选中样式  
                                    borderWidth: 5,  
                                    borderColor: 'yellow',  
                                    color: '\#cd5c5c',  
                                    label: \{  
                                        show: false,  
                                        textStyle: \{  
                                            color: 'blue'  
                                        \}  
                                    \}  
                                \}  
                            \}  
                \}  
            \],  
                    markPoint: \{  
                        itemStyle: \{  
                            normal: \{  
                                color: 'skyblue'  
                            \}  
                        \},  
                        data: \[  
                            \{  
                                name: '天津',  
                                value: 350  
                            \},  
                            \{  
                                name: '上海',  
                                value: 103  
                            \},  
                            \{  
                                name: 'echarts',  
                                symbol: 'image://../asset/img/echarts-logo.png',  
                                symbolSize: 21,  
                                x: 300,  
                                y: 100  
                    \}  
                \]  
                    \},  
                    geoCoord: \{  
                        '上海': \[121.4648, 31.2891\],  
                        '天津': \[117.4219, 39.4189\]  
                    \}  
        \}  
    \]  
        \}  
        myChart.setOption(option);  
    </script>  
</body>  
  
</html>

**效果图如下：**

![20141212155556537][]

[20141212155122850]: /images/20220806/26326e1ea775476c8f12ae243bea7e78.png
[20141212155542437]: /images/20220806/c38afcf22a7f460baeda2e9277d48bf6.png
[20141212155556537]: /images/20220806/a06931c321534f3ca5c87739e516f686.png