使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示。
第一种方法:
将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字,添加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中国地图的更多相关文章
- 渗透-简单制作过waf的中国菜刀
0x01 简单分析 web渗透中很常见的情况,用菜刀连接免杀的一句话木马连不上,有waf 除了变形一句话木马为免杀一句话,我们还需要来制作过waf的菜刀进行连接. 这里用的一句话为 来看看菜刀连接一句 ...
- echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- Vue3 + Echarts 5 绘制带有立体感流线中国地图,建议收藏
本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- 图表制作工具之ECharts
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 工作中遇到的有关echarts地图和百度地图的问题
工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
- vue + echart 实现中国地图 和 省市地图(可切换省份)
一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...
随机推荐
- P1270 “访问”美术馆
题目描述 经过数月的精心准备,Peer Brelstet,一个出了名的盗画者,准备开始他的下一个行动.艺术馆的结构,每条走廊要么分叉为两条走廊,要么通向一个展览室.Peer知道每个展室里藏画的数量,并 ...
- 2017 多校6 String
多校6 String(ac自动机) 题意: 给一本有\(n\)个单词的字典 \(q\)个查询 \(pref_i,suff_i\) 查询字典里有多少单词前缀匹配\(pref_i\),后缀同时匹配\(su ...
- Windows转移FSMO角色
转移 FSMO 角色若要使用 Ntdsutil 实用工具转移 FSMO 角色,请按照下列步骤操作:1.登录到基于 Windows 2000 Server 或基于 Windows Server 2003 ...
- 蓝牙HC-05与HC-06对比指令集
高电平->AT命令响应工作状态 低电平->蓝牙常规工作状态 <重新上电表示完成复位> HC-05 可以主从切换模式,但是HC-06虽然可以做主机也可以做从机,但是不能切 ...
- Dinic算法学习&&HDU2063
http://www.cnblogs.com/SYCstudio/p/7260613.html 看这篇博文懂了一点,做题再体会体会吧 找了好久都没找到一个好用的模板…… 我也是佛了..最后决定用峰神的 ...
- DataTable转换为实体集合
using System; using System.Collections; using System.Collections.Generic; using System.Data; using S ...
- ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴
在用户目录编辑.vimrc文件不存在则创建,vi的三种模式:命令模式,插入模式,可视模式,鼠标可以启动于各种模式中,所以配置文件中的set mouse=a启动了所有模式,这样就屏蔽了鼠标右健功能,se ...
- win2008服务器asp站点配置要点
Win2008服务器重装系统后,运行ASP站点(使用Access数据库)报N多错误,经过一小时总算解决,总结如下: 在win2008服务器上1. 本站点应用程序池改为启用32位.2. 本站点启用父路径 ...
- springBoot Ribbon Hystrix Dashboard
1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...
- NetStream论文
https://max.book118.com/html/2016/0102/32573670.shtm http://www.docin.com/p-1568348795.html