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操作系 ...
随机推荐
- Servlet以流的形式返回图片
代码: import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import ...
- [建树(非二叉树)] 1090. Highest Price in Supply Chain (25)
1090. Highest Price in Supply Chain (25) A supply chain is a network of retailers(零售商), distributors ...
- Gradle入门（2）：构建简介
基本概念 在Gradle中,有两个基本概念:项目和任务.请看以下详解: 项目是指我们的构建产物(比如Jar包)或实施产物(将应用程序部署到生产环境).一个项目包含一个或多个任务. 任务是指不可分的最小 ...
- JS计算两个日期之间的天数，时间差计算
1.日期之间的天数计算 //计算天数差的函数,通用 function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2017-9-25格式 var aDate, ...
- vue-cli 安装时 npm 报错 errno -4048
如何解决vue-cli 安装时 npm 报错 errno -4048 第一种解决方法:以管理身份运行cmd.exe 第二种解决办法:在dos窗口输入命令 npm cache clean --fo ...
- 简单复利计算c语言实现
#include<stdio.h>#include<math.h>float i; //利率 float p; //期初金额 float F; //未来值 int n; //期 ...
- [BUAA2017软工]个人作业week-1
一.快速看完整部教材,列出你仍然不懂的5到10个问题,发布在你的个人博客上. 1.在第二章个人技术和流程,邹欣老师提到了一张表格,主要解释了效能分析的一些名词,其中有这么几个概念: 调用者:函数Foo ...
- 解决方案~Microsoft Security Client OOBE 程序错误
Microsoft Security Client OOBE 程序错误 适用于: Windows Windows 7 系统错误日志如下:会话"Microsoft Security Clien ...
- spring 中 ThreadPoolTaskExecutor 的使用
配置文件代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
- DAY2-Python学习笔记
1.迭代器:可以直接作用于for循环的对象统称为可迭代对象:Iterable,使用isinstance()判断一个对象是否是Iterable对象: >>> from collecti ...