提取 ECharts 中的svg地图信息
编辑：www.fx114.net
本篇文章主要介绍了"提取 ECharts 中的svg地图信息 "，主要涉及到提取 ECharts 中的svg地图信息 方面的内容，对于提取 ECharts 中的svg地图信息 感兴趣的同学可以参考一下。
地图的需求还是蛮大的，全国都要自己画的话，还是需要投入比较大的人力。
ECharts中有地图，那我们能不能把里面的地图文件提取出来呢，主要逻辑在map.js中。
看源代码发现，ECharts中地图信息，通过算法，把坐标信息，转换成基准[x,y]和坐标数组，再通过String.fromCharCode坐标数组转换成字符()，进行存储
这也是一种大量数字数据，前端压缩，编码的好办法。
ECharts的使用的这种方式，灵活性更高，可以修改图像的偏移，放大倍数。
而在项目中，使用的方式，可以通过viewBox完成，但是图像偏移就没有简便方法实现了
　　代码大部分都是ECharts内部代码，把用到的整理出来，通过raphael把地图显示出来，。
　　上个效果图
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：jsp使用ECharts动态在地图上标识点
作者：张占岭
字体：[ ] 类型：转载 时间：
echarts地图展示功能很强大,官网上静态展示的例子很多了,动态的资料少,需要参考本文的可以进来了解一下。
ECharts可以很方便的在网页上绘制地图，图表，并且可以提供下载图像，放大，缩小，拖动等功能，今天主要说一下它的地图类型（type:＇map＇)是如何实现的。
首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里，它是一个ＪＳ的字典对象，由键／值对组成，键表示点的名称，值则表达它的坐标，由经纬度组成，它是一个数组，如[136.00,32.00]它就表示了一个坐标．
地图类型的图表需要关注的元素
title：标题，显示这个地图所表示的名称
text: '清大云点亮中国',
subtext: 'Tsingda.Cloud',
sublink: '',
x: 'center',
textStyle: {
color: '#fff'
toolbox：工具栏，显示一些显示的工具，放大，缩小，查看数据集，下载图像等。
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
egend：图标显示，当series有多个地图时，这个值用到显示多个地图的图标，可以是横向显示和纵向显示
x: 'left',
data: ['在线', '离线'],//在线和离线对应的是series的名字
selectedMode: false,//选中悬浮
textStyle: {
color: '#fff'
series：地图显示，用来叠放显示地图，你可以定义多个，它们之间的关系是第一个在最上面，以此类推．
name: '底层模版',
type: 'map',
mapType: 'china',
data: provinceMap,
geoCoord: source,
itemStyle: {
color: bgColor,
borderColor: "#eee",
show: true,
textStyle: {
color: "#fff"
}, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
markPoint：点标识，用来标识地图上的后，这些点通常是被存储在一个geoCoord对象上，这个对象是一个字典，这在文章开头已经介绍过．
markPoint: {//动态标记
large: true,//这个选项，悬浮自动失效
symbolSize: 2,
itemStyle: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: onColor
markPoint里的data对象是这个地图上需要显示的点，它是一个字符型数组，用来存储geoCoord里的键！
setOption:将地图对象添加到指定的地图对象上
var myChart = echarts.init(document.getElementById('main'));
var option={};
myChart.setOption(option);
动态构建地图上的点标识markPoint
大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上，这样就可以动态在地图上标示点了
$.get("/map/GetOffMap", function (data) {
for (var i in data) {
option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];
option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude });
myChart.setOption(option);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具echarts地图扩展___自定义的svg图
时间： 20:23:32
&&&& 阅读：379
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&echarts的自定义地图
标签引入js文件
<span style="color: # &script type="text/javascript" src="echarts/require.js"&&/script&
<span style="color: # &script type="text/javascript" src="echarts/echarts.js"&&/script&
html部分：
<span style="color: # &div id="test"&
<span style="color: #
&div id="main" style="height:500border:1px solid #e4393c"&&/div&
<span style="color: # &/div&
1 require.config({
echarts : ‘echarts/echarts‘,
‘ehcarts/chart/map‘ : ‘chart/map‘
6 });//加载echarts.js和map.js
7 require(
‘echarts‘,
‘echarts/chart/map‘
function(ec){
　　　　　　require(‘echarts/util/mapData/params‘).params.ship
getGeoJson : function(callback){
url"echarts/echarts/oneFloor.svg",//svg地图
dataType : "xml",
success : function(xml){
　　callback(xml);
var myChart = ec.init(document.getElementById(‘main‘));
var option = {
25 　　　　　　　　　　　　title : {
text : ‘测试‘
tooltip : {
trigger : ‘item‘,
formatter : ‘{b}‘
series : [
name: ‘嘿嘿‘,
type: ‘map‘,
mapType: ‘ship‘,
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
geoCoord: {
‘叮叮‘: [0, 0],
‘小兑儿‘: [100, 45]
markPoint : {
symbol : ‘image://img/logo-blue.png‘,
symbolSize : 10,
effect : {
show : true
{name: ‘叮叮‘},
{name: ‘小兑儿‘}
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: ‘#fff‘,
shadowBlur: 5
symbol: [‘none‘],
itemStyle : {
borderWidth:1,
lineStyle: {
type: ‘solid‘
{name:‘erik‘},
{name:‘胡瑶‘}
{name:‘祖明‘},
{name:‘叮叮‘}
{name:‘祖明‘},
{name:‘小兑儿‘}
name : ‘信达泰‘,
type : ‘map‘,
mapType : ‘ship‘,
roam : true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
<span style="color: #0
<span style="color: #1
<span style="color: #2
geoCoord: {
<span style="color: #3
‘孙经理‘: [100, 245],
<span style="color: #4
‘小姜同学‘: [100, 345]
<span style="color: #5
<span style="color: #6
markPoint : {
<span style="color: #7
symbolSize : 10,
<span style="color: #8
symbol : ‘image://img/icon.png‘,
<span style="color: #9
<span style="color: #0
{name : ‘孙经理‘},
<span style="color: #1
{name : ‘小姜同学‘},
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6
<span style="color: #7
name: ‘高经‘,
<span style="color: #8
type: ‘map‘,
<span style="color: #9
mapType: ‘ship‘,
<span style="color: #0
roam:true,
<span style="color: #1
symbol: [‘none‘],
<span style="color: #2
itemStyle:{
<span style="color: #3
normal:{label:{show:true}},
<span style="color: #4
emphasis:{label:{show:true}}
<span style="color: #5
<span style="color: #6
<span style="color: #7
markLine : {
<span style="color: #8
smooth:true,
<span style="color: #9
effect : {
<span style="color: #0
show: true,
<span style="color: #1
scaleSize: 1,
<span style="color: #2
period: 20,
<span style="color: #3
color: ‘#fff‘,
<span style="color: #4
shadowBlur: 5
<span style="color: #5
<span style="color: #6
itemStyle : {
<span style="color: #7
<span style="color: #8
borderWidth:1,
<span style="color: #9
lineStyle: {
<span style="color: #0
type: ‘solid‘
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6
{name:‘高经‘},
<span style="color: #7
{name:‘洗手间‘, geoCoord:[440, 179]}
<span style="color: #8
<span style="color: #9
<span style="color: #0
{name:‘高经‘},
<span style="color: #1
{name:‘洗手间‘, geoCoord:[637, 53]}
<span style="color: #2
<span style="color: #3
<span style="color: #4
{name:‘高经‘},
<span style="color: #5
{name:‘洗手间‘, geoCoord:[637, 179]}
<span style="color: #6
<span style="color: #7
<span style="color: #8
{name:‘高经‘},
<span style="color: #9
{name:‘洗手间‘, geoCoord:[307, 179]}
<span style="color: #0
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6
myChart.setOption(option);
<span style="color: #7
<span style="color: #8
完整部分：
1 &!DOCTYPE html&
&title&&/title&
&script type="text/javascript" src="echarts/jquery.min.js"&&/script&
&script type="text/javascript" src="echarts/require.js"&&/script&
&script type="text/javascript" src="echarts/echarts.js"&&/script&
&style type="text/css"&
/*background:url("img/login.jpg");*/
13 &/head&
&div id="test"&
&div id="main" style="height:500border:1px solid #e4393c"&&/div&
&script type="text/javascript"&
require.config({
echarts : ‘echarts/echarts‘,
‘ehcarts/chart/map‘ : ‘chart/map‘
‘echarts‘,
‘echarts/chart/map‘
function(ec){
require(‘echarts/util/mapData/params‘).params.ship
getGeoJson : function(callback){
url : "echarts/echarts/bg-test.svg",
dataType : "xml",
success : function(xml){
callback(xml);
var myChart = ec.init(document.getElementById(‘main‘));
var option = {
text : ‘测试‘
tooltip : {
trigger : ‘item‘,
formatter : ‘{b}‘
series : [
name: ‘嘿嘿‘,
type: ‘map‘,
mapType: ‘ship‘,
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
geoCoord: {
‘叮叮‘: [0, 0],
‘小兑儿‘: [100, 45],
‘胡瑶‘: [195, 29],
‘祖明‘: [195, 44],
‘林峰‘: [195, 60],
‘安晨‘: [210, 44],
‘功‘: [210, 60],
‘立新‘: [144, 59],
‘诗才‘: [195, 71],
‘黄競‘: [210, 59],
‘浪宇‘: [150, 55],
‘晓青‘: [210, 71],
‘毅楠‘: [222, 59],
‘朝霞‘: [222, 71],
‘武琦‘: [231, 71],
‘严萍‘: [231, 46],
‘绍波‘: [231, 59],
‘开放‘: [488, 43],
‘兵兵‘: [488, 60],
‘孟珂‘: [522, 43],
‘辉耀‘: [522, 60],
‘佳璐‘: [488, 23],
‘新乐‘: [522, 23],
‘大佛‘: [165, 29],
‘周玉‘: [165, 44],
‘令君‘: [165, 60],
‘佳璐‘: [165, 71],
‘erik‘: [222, 44],
‘爽哥‘: [240, 60],
‘雷哥‘: [240, 44],
‘坤哥‘: [176, 59],
‘刚哥‘: [176, 71],
‘高经‘: [545, 54],
‘邱华‘: [468, 23],
‘饥渴难耐的辉辉‘: [473, 40],
‘大发‘: [500, 40],
<span style="color: #0
‘淼童‘: [473, 60],
<span style="color: #1
‘亚江‘: [500, 60],
<span style="color: #2
‘莉姐‘: [530, 70],
<span style="color: #3
‘红启‘: [570, 54],
<span style="color: #4
‘五福降中天‘: [373, 173],
<span style="color: #5
‘csfe‘: [500, 54],
<span style="color: #6
‘得胜令‘: [253, 179],
<span style="color: #7
‘西湖春‘: [496, 179],
<span style="color: #8
‘望江南‘: [72, 203],
<span style="color: #9
‘庆千秋‘: [86, 203],
<span style="color: #0
‘过江龙‘: [289, 32],
<span style="color: #1
‘天下乐‘: [289, 50],
<span style="color: #2
‘万年欢‘: [687, 24],
<span style="color: #3
‘浣溪沙‘: [637, 203],
<span style="color: #4
‘清平乐‘: [649, 203],
<span style="color: #5
‘四和春‘: [663, 203],
<span style="color: #6
‘杏花天‘: [676, 203]
<span style="color: #7
<span style="color: #8
markPoint : {
<span style="color: #9
symbol : ‘image://img/logo-blue.png‘,
<span style="color: #0
symbolSize : 10,
<span style="color: #1
effect : {
<span style="color: #2
show : true
<span style="color: #3
<span style="color: #4
<span style="color: #5
{name: ‘叮叮‘},
<span style="color: #6
{name: ‘小兑儿‘},
<span style="color: #7
{name: ‘胡瑶‘},
<span style="color: #8
{name: ‘高经‘},
<span style="color: #9
{name: ‘erik‘},
<span style="color: #0
{name: ‘祖明‘},
<span style="color: #1
{name: ‘林峰‘},
<span style="color: #2
{name: ‘坤哥‘},
<span style="color: #3
{name: ‘刚哥‘},
<span style="color: #4
{name: ‘爽哥‘},
<span style="color: #5
{name: ‘雷哥‘},
<span style="color: #6
{name: ‘邱华‘},
<span style="color: #7
{name: ‘淼童‘},
<span style="color: #8
{name: ‘亚江‘},
<span style="color: #9
{name: ‘莉姐‘},
<span style="color: #0
{name: ‘大发‘},
<span style="color: #1
{name: ‘饥渴难耐的辉辉‘},
<span style="color: #2
{name: ‘红启‘},
<span style="color: #3
{name: ‘安晨‘},
<span style="color: #4
{name: ‘功‘},
<span style="color: #5
{name: ‘立新‘},
<span style="color: #6
{name: ‘诗才‘},
<span style="color: #7
{name: ‘黄競‘},
<span style="color: #8
{name: ‘晓青‘},
<span style="color: #9
{name: ‘毅楠‘},
<span style="color: #0
{name: ‘浪宇‘},
<span style="color: #1
{name: ‘朝霞‘},
<span style="color: #2
{name: ‘严萍‘},
<span style="color: #3
{name: ‘武琦‘},
<span style="color: #4
{name: ‘绍波‘},
<span style="color: #5
{name: ‘开放‘},
<span style="color: #6
{name: ‘兵兵‘},
<span style="color: #7
{name: ‘孟珂‘},
<span style="color: #8
{name: ‘辉耀‘},
<span style="color: #9
{name: ‘佳璐‘},
<span style="color: #0
{name: ‘新乐‘},
<span style="color: #1
{name: ‘周玉‘},
<span style="color: #2
{name: ‘令君‘},
<span style="color: #3
{name: ‘佳璐‘}
<span style="color: #4
<span style="color: #5
<span style="color: #6
markLine : {
<span style="color: #7
smooth:true,
<span style="color: #8
effect : {
<span style="color: #9
show: true,
<span style="color: #0
scaleSize: 1,
<span style="color: #1
period: 20,
<span style="color: #2
color: ‘#fff‘,
<span style="color: #3
shadowBlur: 5
<span style="color: #4
<span style="color: #5
symbol: [‘none‘],
<span style="color: #6
itemStyle : {
<span style="color: #7
<span style="color: #8
borderWidth:1,
<span style="color: #9
lineStyle: {
<span style="color: #0
type: ‘solid‘
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6
{name:‘erik‘},
<span style="color: #7
{name:‘胡瑶‘}
<span style="color: #8
<span style="color: #9
<span style="color: #0
{name:‘祖明‘},
<span style="color: #1
{name:‘叮叮‘}
<span style="color: #2
<span style="color: #3
<span style="color: #4
{name:‘祖明‘},
<span style="color: #5
{name:‘小兑儿‘}
<span style="color: #6
<span style="color: #7
<span style="color: #8
<span style="color: #9
<span style="color: #0
<span style="color: #1
name : ‘信达泰‘,
<span style="color: #2
type : ‘map‘,
<span style="color: #3
mapType : ‘ship‘,
<span style="color: #4
roam : true,
<span style="color: #5
itemStyle:{
<span style="color: #6
normal:{label:{show:true}},
<span style="color: #7
emphasis:{label:{show:true}}
<span style="color: #8
<span style="color: #9
<span style="color: #0
geoCoord: {
<span style="color: #1
‘孙经理‘: [100, 245],
<span style="color: #2
‘小姜同学‘: [100, 345]
<span style="color: #3
<span style="color: #4
markPoint : {
<span style="color: #5
symbolSize : 10,
<span style="color: #6
symbol : ‘image://img/icon.png‘,
<span style="color: #7
<span style="color: #8
{name : ‘孙经理‘},
<span style="color: #9
{name : ‘小姜同学‘},
<span style="color: #0
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
name: ‘高经‘,
<span style="color: #6
type: ‘map‘,
<span style="color: #7
mapType: ‘ship‘,
<span style="color: #8
roam:true,
<span style="color: #9
symbol: [‘none‘],
<span style="color: #0
itemStyle:{
<span style="color: #1
normal:{label:{show:true}},
<span style="color: #2
emphasis:{label:{show:true}}
<span style="color: #3
<span style="color: #4
<span style="color: #5
markLine : {
<span style="color: #6
smooth:true,
<span style="color: #7
effect : {
<span style="color: #8
show: true,
<span style="color: #9
scaleSize: 1,
<span style="color: #0
period: 20,
<span style="color: #1
color: ‘#fff‘,
<span style="color: #2
shadowBlur: 5
<span style="color: #3
<span style="color: #4
itemStyle : {
<span style="color: #5
<span style="color: #6
borderWidth:1,
<span style="color: #7
lineStyle: {
<span style="color: #8
type: ‘solid‘
<span style="color: #9
<span style="color: #0
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
{name:‘高经‘},
<span style="color: #5
{name:‘洗手间‘, geoCoord:[440, 179]}
<span style="color: #6
<span style="color: #7
<span style="color: #8
{name:‘高经‘},
<span style="color: #9
{name:‘洗手间‘, geoCoord:[637, 53]}
<span style="color: #0
<span style="color: #1
<span style="color: #2
{name:‘高经‘},
<span style="color: #3
{name:‘洗手间‘, geoCoord:[637, 179]}
<span style="color: #4
<span style="color: #5
<span style="color: #6
{name:‘高经‘},
<span style="color: #7
{name:‘洗手间‘, geoCoord:[307, 179]}
<span style="color: #8
<span style="color: #9
<span style="color: #0
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4
myChart.setOption(option);
<span style="color: #5
<span style="color: #6
<span style="color: #7
<span style="color: #8
&script type="text/javascript"&
<span style="color: #9
$("#sel select").change(function(){
<span style="color: #0
selectChange($(this).val());
<span style="color: #1
<span style="color: #2
<span style="color: #3
<span style="color: #4 &/body&
<span style="color: #5 &/html&
效果如下：
&需要注意的点：
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/litter/p/6387624.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！echarts地图搭配饼图怎样实现 Echarts自定义混搭怎么破，想要柱状图和饼图之间切换
你正在浏览： & >
echarts地图搭配饼图怎样实现
echarts地图搭配饼图怎样实现
2）拖拽成图：先拖拽工作表至图层，再拖拽经纬度：若只有省份地址1）打开BDP个人版，没有具体的经纬度数据，可以用BDP的“地址转经纬度”功能，瞬间就把地址转成具体的经纬度，在工作表右上方点击“添加图表”—“新建图表”，选择需要的工作数据（可选择多个工作表数据哦）；（这里是选择热力图）注，先上传数据，分析也很精确~ 3）GIS地图“润色”可设置颜色、尺寸：数据上传后、维度数值，然后选择地图统计图：饼图即可
看Echart文档下面有案例
你可能感兴趣的内容？