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

第一种方法：

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

第二种方法：

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

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

echarts使用方法查看页面

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

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

自己试验的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>

效果图如下：

使用echarts简单制作中国地图，echarts中国地图的更多相关文章

  1. 渗透-简单制作过waf的中国菜刀

    0x01 简单分析 web渗透中很常见的情况,用菜刀连接免杀的一句话木马连不上,有waf 除了变形一句话木马为免杀一句话,我们还需要来制作过waf的菜刀进行连接. 这里用的一句话为 来看看菜刀连接一句 ...

  2. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

  3. Vue3 + Echarts 5 绘制带有立体感流线中国地图，建议收藏

    本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...

  4. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  5. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  6. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  7. 工作中遇到的有关echarts地图和百度地图的问题

    工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...

  8. echarts使用------地图生成----省市地图的生成及其他相关细节调整

    为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...

  9. vue + echart 实现中国地图 和 省市地图（可切换省份）

    一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...

随机推荐

  1. 【bzoj4562】[Haoi2016]食物链 拓扑排序+dp

    原文地址:http://www.cnblogs.com/GXZlegend/p/6832118.html 题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题 现在给你n个物种和m条能量流动 ...

  2. [poj] 1235 Farm Tour || 最小费用最大流

    原题 费用流板子题. 费用流与最大流的区别就是把bfs改为spfa,dfs时把按deep搜索改成按最短路搜索即可 #include<cstdio> #include<queue> ...

  3. 雅礼集训 Day1 T3 画作 解题报告

    画作 题目描述 小\(\mathrm{G}\)的喜欢作画,尤其喜欢仅使用黑白两色作画. 画作可以抽象成一个\(r\times c\)大小的\(01\)矩阵.现在小\(\mathrm{G}\)构思好了他 ...

  4. 洛谷 P3224 [HNOI2012]永无乡 解题报告

    P3224 [HNOI2012]永无乡 题目描述 永无乡包含 \(n\) 座岛,编号从 \(1\) 到 \(n\) ,每座岛都有自己的独一无二的重要度,按照重要度可以将这 \(n\) 座岛排名,名次用 ...

  5. 【CZY选讲·Hja的棋盘】

    题目描述 Hja特别有钱,他买了一个×的棋盘,然后Yjq到这个棋盘来搞事.一开始所有格子都是白的,Yjq进行次行操作次列操作,所谓一次操作,是将对应的行列上的所有格子颜色取反.现在Yjq希望搞事之后 ...

  6. [bzoj1833][ZJOI2010]count 数字计数——数位dp

    题目: (传送门)[http://www.lydsy.com/JudgeOnline/problem.php?id=1833] 题解: 第一次接触数位dp,真的是恶心. 首先翻阅了很多很多一维dp,因 ...

  7. loj 数列分块入门 6 9(区间众数)

    6 题意 给出一个长为\(n\)的数列,以及\(n\)个操作,操作涉及单点插入,单点询问,数据随机生成. 题解 参考:http://hzwer.com/8053.html 每个块内用一个\(vecto ...

  8. 小Z爱图论（NOIP信（sang）心（bin）赛）From FallDream

    题目: 小Z最近喜欢上了图论,于是他研究了一下图的连通性问题.但是他遇到了一个难题. 给定一个n个点的有向图,求有多少点对(i,j)满足从i点出发能到达点j ? 小Z仅会简单的朴素算法,所以他想问问你 ...

  9. Xdebug安装对应版本与配置

    Xdebug安装地址https://xdebug.org/download.php,进入下载页面后点击custom installation instructions,可以找到适合的Xdebug版本. ...

  10. SpringBoot无XML配置

    SpringBoot,自己研究了好几天,以前也是没有接触过这类的框架,不过原理吧,也就是那么些个原理,毕竟都是Spring开源下的子框架. 好了,回归正题,今天晚上研究了好久,写出来了无配置文件的ja ...