<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. Luinx安装RocketMQ

    一.RocketMQ环境 准备两台虚拟机,分别为master01 和master02 二.安装JDK(两台虚拟机相同步骤) 1. 检查当前虚拟机环境有没有JDK rpm -qa|grep java ( ...

  2. Java集合中removeIf的使用

    在JDK1.8中,Collection以及其子类新加入了removeIf方法,作用是按照一定规则过滤集合中的元素.这里给读者展示removeIf的用法.首先设想一个场景,你是公司某个岗位的HR,收到了 ...

  3. 【TensorFlow】TensorFlow基础 —— 模型的保存读取与可视化方法总结

    TensorFlow提供了一个用于保存模型的工具以及一个可视化方案 这里使用的TensorFlow为1.3.0版本 一.保存模型数据 模型数据以文件的形式保存到本地: 使用神经网络模型进行大数据量和复 ...

  4. SQLYOG导入数据时报错,出现找不到Microsoft office 元驱动程式,并且无法安装64位office Access驱动

    当我们使用mysql导入外部数据时(如Excel表),有时会出现如下的错误问题,即找不到64位access驱动.为了解决这个问题,我们需要下载相应的驱动,通过下图中的点击此链接即可进入下载页面(htt ...

  5. SpringBoot、Spring MVC报错:Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]

    出现问题的原因: jdbc配置不正确 解决方案: 1.检查是否已添加数据库驱动jar包 2.检查数据库服务是否启动 3.检查数据库配置文件 主要为:dialect,driver_class,url,u ...

  6. 小程序websocket心跳库——websocket-heartbeat-miniprogram

    前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...

  7. 《自拍教程9》Python编程风格规范

    Python编程风格规范 根据Python官方提供的Python编程风格规范: Style Guide for Python Code, 即PEP8规范, https://www.python.org ...

  8. 与WinRT组件进行操作

    1,原理: WinRT是一个新的类库,应用程序可以用它访问操作系统的功能. 在内部,WinRT以组件的形式实现.COM Component Object Model- WinRT使用.net元数据来描 ...

  9. C#设计模式学习笔记:(13)模板方法模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7837716.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第一个模式--模 ...

  10. ubuntu18.04管理redis

    ubuntu下 redis的安装使用 安装 1. 进入redis安装路径 cd ~/installed/redis-5.0.7 2. 启动redis 启动服务端redis-server 启动客户端(必 ...