使用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.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- 使用echarts简单制作省份地图
引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址 引入对应省份的js文件 可以在http://echarts.baidu.co ...
- 利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的. 下面本人就 利用 Echarts 简单绘制省份地图 的步骤与经验与各位分享一下. 1.准备工作 1.1 下载js静态文 ...
- mapboxgl+echarts 简单制作专题地图
mapboxgl+echarts 简单制作专题地图 实现效果 思路 实现过程 全部代码 实现效果 思路 1.引用mapboxgl脚本库及样式库与echart脚本库. 2.准备专题数据,此处我们使用模拟 ...
- python作中国地图背景气泡图_exce表格中怎么制作中国地图背景数据气泡图
exce表格中怎么制作中国地图背景数据气泡图 exce表格中怎么制作中国地图背景数据气泡图?excel表格中想要在中国地图上显示气泡来看看地区分布情况,该怎么设置中国地图气泡图表呢?下面我们就来看看详 ...
- python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如何实现这样的气泡图.今天,学习啦小编就教大家在Excel图表中制作中国地图为背景气泡图的操作方法. Exc ...
- python作中国地图背景气泡图_excel怎么制作中国地图背景效果的气泡图?
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如下图所示.该怎使用excel制作气泡图效果呢?下面我们就来看看详细的教程. 软件名称:Microsoft ...
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- 使用Echarts完成对中国地图的绘制
目录 前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结 前言 我们在使用代码绘画地图的时候通常 ...
最新文章
- 动感灯箱制作流程培训_广告立体灯箱的特点有哪些?
- 信息学奥赛C++语言:重组
- short s1=1;s1+=1问题
- Python之常用函数小结
- 用js和jq分别实现二级联动效果
- 【C++】2018华为软挑:模拟退火+贪心FF解决装箱问题
- 移动硬盘上装双系统Linux
- php获取百度搜索的关键词,【2020年】百度搜索词获取,获取百度搜索的关键词【真实有效】...
- 吴晓波罗振宇2019跨年演讲感想
- node打包时遇到的问题
- 计算机优质书籍搜集(持续更新)
- “测试之道”主题(深圳站)
- c++ bool类型
- 你的程序需要具备“自检”能力
- N1盒子op系统nps内网穿透对接腾讯云傻妞
- Python requests post上传图片
- 孩子近视为什么不让立马配眼镜?近视还有真假之分?
- java dwg文件_Object java添加dwg文件问题
- jQuery幸运大转盘
- 计算机窗口预览图,win10系统任务栏缩略图窗口预览速度提升的操作方法