echarts地图扩展___自定义的svg图
echarts的自定义地图
标签引入js文件
<script type="text/javascript" src="echarts/require.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
html部分：
<div id="test">
<div id="main" style="height:500px;border:1px solid #e4393c"></div>
</div>
js部分：
require.config({
paths : {
echarts : 'echarts/echarts',
'ehcarts/chart/map' : 'chart/map'
}
});//加载echarts.js和map.js
require(
[
'echarts',
'echarts/chart/map'
],
function(ec){
require('echarts/util/mapData/params').params.ship = {
getGeoJson : function(callback){
$.ajax({
url"echarts/echarts/oneFloor.svg",//svg地图
dataType : "xml",
success : function(xml){
callback(xml);
}
});
}
}
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : '测试'
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [
{
name: '嘿嘿',
type: 'map',
mapType: 'ship',
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'叮叮': [0, 0],
'小兑儿': [100, 45]
},
markPoint : {
symbol : 'image://img/logo-blue.png',
symbolSize : 10,
effect : {
show : true
},
data : [
{name: '叮叮'},
{name: '小兑儿'}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
symbol: ['none'],
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'erik'},
{name:'胡瑶'}
],
[
{name:'祖明'},
{name:'叮叮'}
],
[
{name:'祖明'},
{name:'小兑儿'}
]
]
}
},
{
name : '信达泰',
type : 'map',
mapType : 'ship',
roam : true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'孙经理': [100, 245],
'小姜同学': [100, 345]
},
markPoint : {
symbolSize : 10,
symbol : 'image://img/icon.png',
data : [
{name : '孙经理'},
{name : '小姜同学'},
]
}
},
{
name: '高经',
type: 'map',
mapType: 'ship',
roam:true,
symbol: ['none'],
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'高经'},
{name:'洗手间', geoCoord:[440, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 53]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[307, 179]}
]
]
}
}
]
};
myChart.setOption(option);
}
)
完整部分：
<!DOCTYPE html>
<html>
<head>
<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">
#test{
/*background:url("img/login.jpg");*/
}
</style>
</head>
<body>
<div id="test">
<div id="main" style="height:500px;border:1px solid #e4393c"></div> </div>
<script type="text/javascript">
require.config({
paths : {
echarts : 'echarts/echarts',
'ehcarts/chart/map' : 'chart/map'
}
});
require(
[
'echarts',
'echarts/chart/map'
],
function(ec){
require('echarts/util/mapData/params').params.ship = {
getGeoJson : function(callback){
$.ajax({
url : "echarts/echarts/bg-test.svg",
dataType : "xml",
success : function(xml){
callback(xml);
}
});
}
}
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : '测试'
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [
{
name: '嘿嘿',
type: 'map',
mapType: 'ship',
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
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],
'淼童': [473, 60],
'亚江': [500, 60],
'莉姐': [530, 70],
'红启': [570, 54],
'五福降中天': [373, 173],
'csfe': [500, 54],
'得胜令': [253, 179],
'西湖春': [496, 179],
'望江南': [72, 203],
'庆千秋': [86, 203],
'过江龙': [289, 32],
'天下乐': [289, 50],
'万年欢': [687, 24],
'浣溪沙': [637, 203],
'清平乐': [649, 203],
'四和春': [663, 203],
'杏花天': [676, 203]
},
markPoint : {
symbol : 'image://img/logo-blue.png',
symbolSize : 10,
effect : {
show : true
},
data : [
{name: '叮叮'},
{name: '小兑儿'},
{name: '胡瑶'},
{name: '高经'},
{name: 'erik'},
{name: '祖明'},
{name: '林峰'},
{name: '坤哥'},
{name: '刚哥'},
{name: '爽哥'},
{name: '雷哥'},
{name: '邱华'},
{name: '淼童'},
{name: '亚江'},
{name: '莉姐'},
{name: '大发'},
{name: '饥渴难耐的辉辉'},
{name: '红启'},
{name: '安晨'},
{name: '功'},
{name: '立新'},
{name: '诗才'},
{name: '黄競'},
{name: '晓青'},
{name: '毅楠'},
{name: '浪宇'},
{name: '朝霞'},
{name: '严萍'},
{name: '武琦'},
{name: '绍波'},
{name: '开放'},
{name: '兵兵'},
{name: '孟珂'},
{name: '辉耀'},
{name: '佳璐'},
{name: '新乐'},
{name: '周玉'},
{name: '令君'},
{name: '佳璐'}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
symbol: ['none'],
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'erik'},
{name:'胡瑶'}
],
[
{name:'祖明'},
{name:'叮叮'}
],
[
{name:'祖明'},
{name:'小兑儿'}
]
]
}
},
{
name : '信达泰',
type : 'map',
mapType : 'ship',
roam : true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'孙经理': [100, 245],
'小姜同学': [100, 345]
},
markPoint : {
symbolSize : 10,
symbol : 'image://img/icon.png',
data : [
{name : '孙经理'},
{name : '小姜同学'}, ]
}
},
{
name: '高经',
type: 'map',
mapType: 'ship',
roam:true,
symbol: ['none'],
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'高经'},
{name:'洗手间', geoCoord:[440, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 53]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[307, 179]}
]
]
}
}
]
};
myChart.setOption(option);
}
)
</script>
<script type="text/javascript">
$("#sel select").change(function(){
selectChange($(this).val());
}) </script>
</body>
</html>
效果如下：
需要注意的点：
echarts地图扩展___自定义的svg图的更多相关文章
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- 百度echarts地图扩展动态加载geoCoord
var data={}; for(var i=0;i<result.length;i++){ data[(""+result[i].name+"")]=e ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
- EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- 多个SVG图形集成到一个SVG图形上
SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...
- C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色
在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...
- WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
随机推荐
- 第一个spring冲刺总结
讨论成员:罗凯旋.罗林杰.吴伟锋.黎文衷 第一阶段总体是做到了运算的功能,只是一些基本的功能实现,包括APP进入动画,以及界面的基本效果设计,还有核心算法已经实现(可以计算括号 乘除法等等)“: 燃尽 ...
- 【贪心算法】POJ-3190 区间问题
一.题目 Description Oh those picky N (1 <= N <= 50,000) cows! They are so picky that each one wil ...
- Software Defined Networking(Week 2, part 3)
Control of Packet-switch Network 我们已经讨论过中心控制网络的原理,但主要是以电话网络做模型的.现在我们来看看对于分组交换网络的控制是如何改进的. Why Separa ...
- self和super关键字介绍
1.self和super OC提供两个保留字self 和 super ,用在方法定义中 OC语言中的self, 就相当于C++和Java中的this指针,学会使用self 首先要搞清楚属性这一概念以及 ...
- ansible的简单使用
环境搭建跳过(暂无,这个以后再学习学习,不要在意这些细节) 首先,在环境搭建好后,用两台虚机来做测试,一台192.168.181.130做测试机,一台192.168.181.131为批量处理服务器 编 ...
- PHP 官方发行版扩展下载地址
PHP扩展下载 稳定发行版资源下载地址: https://windows.php.net/downloads/pecl/releases/ 常用扩展: 持续更新中 ... igbinary序列化/反序 ...
- [转帖]SQLSERVER2008R2 将于2019.7.9 结束支持服务 Windows server 2008r2 将于 2020.1.14 结束支持
来源: https://cloudblogs.microsoft.com/sqlserver/2018/07/12/sql-server-2008-end-of-support-is-the-firs ...
- js 时间处理函数 获取今天的前几天和后几天的任意一天
var now = new Date(); let today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDa ...
- 我项目中使用userData的实例 UserData.js
关于userData的介绍,请参见http://hi.baidu.com/kaisep/blog/item/1da9a3312d2da5a15edf0e87.htmlhttp://hi.baidu.c ...
- Codeforces 449B_Jzzhu and Cities
给一个无向图,外加一些特殊的连接原点的无向边.在不改变原点与所有点的最短路的情况下,最多可以删除多少条特殊边? 首先我们把所有的边夹杂在一起.spfa跑出与所有点的最短路. 接下来我们通过一次bfs来 ...