<html>

<body>

<div id="cbar" style="width: 100%; height: 360px"></div>

<script src="${ctxStatic}/echarts3/echarts.min.js"></script>

<script src="${ctxStatic}/mapjs/guangdong.js"></script>

<script type="text/javascript">

$(function(){

        //使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象

        var mapChart5 = echarts.init(document.getElementById('cbar'));

        // mapChart的配置

        var option5 = {

            title:{

                text: '广东XX分布',

                left:'center'

            },

            tooltip: {

                trigger: 'item',

                formatter: '{b}<br/>{c} (个)'

            },

            toolbox: {

                show: true,

                orient: 'vertical',

                left: 'right',

                top: 'center',

                feature: {

                    dataView: {readOnly: false},

                    restore: {},

                    saveAsImage: {}

                }

            },

            visualMap: {

                min: 0,

                max: 2000,

                text:['高','低'],

                realtime: false,

                calculable: true,

                inRange: {

                    color: ['lightskyblue','yellow', 'orangered']

                }

            },

            series:[

                {

                    name: '广东各市',

                    type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型

                    map: '广东', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文

                    layoutCenter:['50%','50%'],

                    aspectScale: 1, //长宽比. default: 0.75

                    zoom: 0,

                    //roam: true,

                    itemStyle:{

                        normal:{label:{show:true}},

                        emphasis:{label:{show:true}}

                    },

                    data: [

                        {name:'广州市', value: 1800},

                        {name:'佛山市', value: 1700},

                        {name:'珠海市', value: 1600},

                        {name:'深圳市', value: 1400},

                        {name:'东莞市', value: 1200},

                        {name:'湛江市', value: 1000},

                        {name:'揭阳市', value: 800},

                        {name:'清远市', value: 600},

                        {name:'阳江市', value: 400},

                        {name:'云浮市', value: 200},

                        {name:'梅州市', value: 100},

                        {name:'肇庆市', value: 300},

                        {name:'江门市', value: 500},

                        {name:'惠州市', value: 700},

                        {name:'茂名市', value: 900},

                        {name:'汕头市', value: 1100},

                        {name:'韶关市', value: 223},

                        {name:'河源市', value: 458},

                        {name:'潮州市', value: 556},

                        {name:'汕尾市', value: 120},

                        {name:'中山市', value: 875}

                    ]

                }

            ]

        };

        //设置图表的配置项

        mapChart5.setOption(option5);

    })

</script>

</body>

</html>

地图JSON和JS : https://download.csdn.net/download/yccmelody/10380590

echarts地图的更多相关文章

  1. Echarts 地图添加自定义区域

    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...

  2. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  3. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

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

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

  5. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

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

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

  7. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  8. echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  9. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

  10. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

随机推荐

  1. Spark Streaming运行流程及源码解析（一）

    本系列主要描述Spark Streaming的运行流程,然后对每个流程的源码分别进行解析 之前总听同事说Spark源码有多么棒,咱也不知道,就是疯狂点头.今天也来撸一下Spark源码. 对Spark的 ...

  2. 【UEFI】--- 探究BIOS NvRam空间的的位置以及大小

    按照国际惯例--先上问题:1. 什么是NvRam空间,里面存储了什么数据 2. 如何找到NvRam空间在BIOS-bin文件中的位置 NvRam空间的学名为: Non-Volatile Ram即非易失 ...

  3. php 截取字符串长度 并 把超出规定长度的内容用...替代

    <?php header("content-type:text/html;charset=utf-8");#设置文件编码 error_reporting(E_ALL);#设置 ...

  4. 优雅的C#

    @符号:字符串中的转义符不转义,可支持字符串换行,例如:string test = "hello\\",正常输出hello\,改成string test = @"hell ...

  5. Java集合那点事， 满满干货~

    说到Java集合,可以说是初学者必踩的坑了. 那么怎么才能学好Java集合呢?个人认为关键是要理清楚思路,从上而下,建立一套完整的思维体系,这样才能更好的去认识事物的本质. 先确立一下学习Java集合 ...

  6. 分享8个laravel模型时间戳使用技巧

    默认情况下,Laravel Eloquent 模型默认数据表有 created_at 和 updated_at 两个字段.当 然,我们可以做很多自定义配置,实现很多有趣的功能.下面举例说明. 1. 禁 ...

  7. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

  8. Android 有关在ListView RecycleView 中使用EditText Checkbox的坑

    这是一篇文字超多的博客,哈哈哈,废话自行过滤··· 遇到问题 在开发中我们常会在ListView , RecycleView 列表中添加EditText输入框,或者checkbox复选框.   复选框 ...

  9. 12-Factor与云原生Part2

    12-Factor与云原生Part2 12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用声明式格式来搭建自动化,从而使新的开发者花费最少的学习成本加入这个项目 和底层操作系统保持简洁 ...

  10. Oracle导出警告&ldquo;EXP-00003: 未找到段 (0,0) 的存储定义&rdquo;解决

    环境:CentOS7.4   Oracle11.2.0.4(搭建rac集群) 问题描述:在使用exp命令执行导出的时候,部分表提示“EXP-00003: 未找到段 (0,0) 的存储定义”警告. 问题 ...