一、
网址：            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坐标],...}

1、ECharts（中国地图篇）的使用的更多相关文章

  1. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  2. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  3. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  4. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  5. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  6. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  7. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  8. 百度Echarts中国地图经纬度

    百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...

  9. ECharts（中国地图篇）的使用

    代码html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <me ...

随机推荐

  1. [题解] [Code+#1]Yazid 的新生舞会

    题面 题解 upd : \(cnt_i\) 代表值为 \(i\) 的个数 我们可以暴力枚举众数 \(k\) 把等于 \(k\) 的赋值成 1 , 不等于 \(k\) 的赋值成 -1 这样原序列就变成了 ...

  2. linux中怎样会引起进程睡眠呢？

    答: 使用信号量,wait队列,completion,调用schedule,用GFP_KERNEL指定的内存分配malloc,get,free,page等都会引起睡眠 思考: Q: 为什么会引起睡眠呢 ...

  3. Android 显示系统：飞思卡尔平台图形界面与GPU硬件加速

    图形是Android平台中的一个大主题,包含java/jni图形框架和2d/3d图形引擎(skia.OpenGL-ES.renderscript). 本文档描述了飞思卡尔设备上的一般Android图形 ...

  4. ClipDrawable

    Clip可以译为剪的意思,我们可以把ClipDrawable理解为从位图上剪下一个部分; Android中的进度条就是使用ClipDrawable来实现的,他根据设置level的值来决定剪切 区域的大 ...

  5. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_12.RabbitMQ研究-工作模式-统配符工作模式测试

    路由模式: 1.每个消费者监听自己的队列,并且设置带统配符的routingkey. 2.生产者将消息发给broker,由交换机根据routingkey来转发消息到指定的队列. 创建测试用例 交换机的名 ...

  6. linux简单命令5---开机与重启

    时间可以写为:now.shutdown命令是安全的命令(保存运行程序) 2:下面为其他不安全的关机命令 必须正确退出登录,window是注销

  7. delphi中Treeview的使用介绍

    今天重点学习了TreeView的使用方法,基本的已经写了,现在主要想说的是如何显示数据库的资料,今天只是做了个较简单的例子,一个父节点下显示数据库中某个field的值.代码如下: procedure ...

  8. centos7 vim环境优化

    centos7默认是使用vi,而不是使用vim,所以,我们需要修改一下vi的别名,并且,我们使用neovim,vi毕竟还是有很多功能比较原始 所以 yum install neovim -ycat & ...

  9. 【FFMPEG】VS2013编译ffmpeg

    原文:http://blog.csdn.net/uselym/article/details/49885867 由于VS2013支持c99了,所以,可以直接用vs2013进行ffmpeg的编译调试,而 ...

  10. Odoo13 新功能：委外

    [ADD] mrp_subcontracting In a few words, it allows to send components to a subcontractor partner and ...