CSDN开源夏令营 百度数据可视化实践 ECharts（5）
Echarts map
谢谢林峰老师的辛勤指导！
本节内容：熟练掌握map和时间轴的搭配
（1）map基本属性
| 名称 | 默认值 | 描写叙述 |
|---|---|---|
| {boolean | string}selectedMode | null | 选中模式，默认关闭，可选single，multiple |
| {string} mapType | 'china' | 地图类型。支持world。china及全国34个省市自治区。省市自治区的mapType直接使用中文简体： 新疆， 西藏， 内蒙古， 青海， 四川。 黑龙江， 甘肃， 云南， 广西。 湖南， 陕西， 广东。吉林， 河北， 湖北， 贵州， 山东， 江西， 河南。 辽宁， 山西， 安徽， 福建。 浙江， 江苏，重庆， 宁夏。 海南。 台湾， 北京。 天津， 上海， 香港， 澳门' 支持子区域模式，通过主地图类型扩展出所包括的子区域地图。格式为'主地图类型|子区域名称'，如 'world|Brazil'。'china|广东'。详见样例 this 》 |
| {boolean} hoverable | true | 非数值显示（如仅用于显示标注标线时）。能够通过hoverable:false关闭区域悬浮高亮 |
| {Object} mapLocation | {x:'center',y:'center'} | 地图位置设置。默认仅仅适应上下左右居中可配x，y，width，height，随意參数为空都将依据其它參数自适应 |
| {string}mapValueCalculation | 'sum' | 地图数值计算方式，默觉得加和，可选为：'sum'（总数） | 'average'（均值） |
| {number}mapValuePrecision | 0 | 地图数值计算结果小数精度，mapValueCalculation为average时有效，默觉得取整，须要小数精度时设置大于0的整数 |
| {boolean}showLegendSymbol | true | 显示图例颜色标识（系列标识的小圆点），存在legend时生效 |
| {boolean} roam | false | 是否开启滚轮缩放和拖拽漫游 |
| {Object} scaleLimit | null | 滚轮缩放的极限控制，可指定{max:number, min:number}。当中max为放大系数，有效值应大于1，min为缩小系数，有效值应小于1 |
| {Object} nameMap | null | 自己定义地区的名称映射，如{'China' : '中国'} |
| {Object} textFixed | null | 地区的名称文本位置修正，数值单位为px。正值为左下偏移，负值为右上偏移，如{'China' : [10, -10]} |
| {Object} geoCoord | null | 通过绝对经纬度指定地区的名称文本位置，如{'Islands':[113.95, 22.26]}，香港离岛区名称显示定位到东经113.95，北纬22.26上 |
| 名称 | 默认值 | 描写叙述 |
|---|---|---|
| {boolean} show | true | 显示策略，可选为：true（显示） | false（隐藏） |
| {string} type | 'time' | 模式是时间类型，时间轴间隔依据时间跨度计算，可选为：'number' |
| {boolean} notMerge | false | 时间轴上多个option切换时是否进行merge操作，同setOption第二个參数（详见实例方法） |
| {boolean} realtime | true | 拖拽或点击改变时间轴是否实时显示 |
| {number | string} x | 80 | 时间轴左上角横坐标。数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) |
| {number | string} y | null | 时间轴左上角纵坐标，数值单位px。支持百分比（字符串），默认无，随y2定位，如'50%'(显示区域纵向中心) |
| {number | string} x2 | 80 | 时间轴右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心) |
| {number | string} y2 | 0 | 时间轴右下角纵坐标。数值单位px。支持百分比（字符串），如'50%'(显示区域纵向中心) |
| {number} width | 自适应 | 时间轴宽度。默觉得总宽度 - x - x2。数值单位px，指定width后将忽略x2。 见下图。 |
| {number} height | 50 | 时间轴高度，数值单位px。支持百分比（字符串）。如'50%'(显示区域一半的高度) |
| {color}backgroundColor | 'rgba(0,0,0,0)' | 背景颜色，默认透明。 |
| {number}borderWidth | 0 | 边框线宽 |
| {color} borderColor | '#ccc' | 边框颜色。 |
| {number | Array}padding | 5 | 内边距。单位px。默认各方向内边距为5，接受数组分别设定上右下左边距。同css，见下图 |
| {string}controlPosition | 'left' | 播放控制器位置，可选为：'left' | 'right' | 'none' |
| {boolean} autoPlay | false | 是否自己主动播放 |
| {boolean} loop | true | 是否循环播放 |
| {number}playInterval | 2000 | 播放时间间隔，单位ms |
| {Object} lineStyle | {color: '#666', width: 1, type: 'dashed'} | 时间轴轴线样式，lineStyle控制线条样式，（详见lineStyle） |
| {Object} label |
{
show: true,
interval: 'auto',
rotate: 0,
formatter: null,
textStyle: {
color: '#333'
}
}
|
时间轴标签文本 show : 是否显示 interval : 挑选间隔，默觉得'auto'，可选为：'auto'（自己主动隐藏显示不下的） | 0（所有显示） | {number} rotate : 旋转角度，默觉得0。不旋转，正值为逆时针。负值为顺时针，可选为：-90 ~ 90 formatter ： 间隔名称格式器：{string}（Template） | {Function} textStyle : 文字样式（详见textStyle） |
| {Object}checkpointStyle |
{
symbol : 'auto',
symbolSize : 'auto',
color : 'auto',
borderColor : 'auto',
borderWidth : 'auto',
label: {
show: false,
textStyle: {
color: 'auto'
}
}
}
|
时间轴当前点 symbol : 当前点symbol，默认随轴上的symbol symbolSize : 当前点symbol大小。默认随轴上symbol大小 color : 当前点symbol颜色，默觉得随当前点颜色，可指定详细颜色，如无则为'#1e90ff' borderColor ： 当前点symbol边线颜色 borderWidth ： 当前点symbol边线宽度 label同上 |
| {Object} controlStyle |
{
normal : { color : '#333'},
emphasis : { color : '#1e90ff'}
}
|
时间轴控制器样式，可指定正常和高亮颜色 |
| {string} symbol | 'emptyDiamond' | 轴点symbol。同serie.symbol |
| {number} symbolSize | 4 | 轴点symbol，同serie.symbolSize |
| {number}currentIndex | 0 | 当前索引位置，相应options数组，用于指定显示特定系列 |
| {Array} data | [] | 时间轴列表，同一时候也是轴label内容 |
（3）足球场实例
本章内容是讲利用ECharts制作足球场，搭配时间轴尝试做出一个进球的球员(markPoint)跑动动画和路线（markLine）的样例。
首先上图：
（3）代码具体解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="@fu">
<title>动态足球场</title>
<link rel="shortcut icon" href="../asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/carousel.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<script src="../asset/js/esl/esl.js"></script>
<script src="../asset/js/codemirror.js"></script>
<script src="../asset/js/javascript.js"></script>
<link href="../asset/css/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
<style type="text/css">
.CodeMirror {
height: 550px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid example">
<div id="sidebar-code" class="col-md-4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
require('echarts/util/mapData/params').params.football = {
getGeoJson: function (callback) {
$.ajax({
url: "svg/football.svg",
dataType: 'xml',
success: function(xml) {
kener = xml;
callback(xml)
}
});
}
}
option = {
timeline : {
data : [
'01-01', '01-03', '01-05', '01-07', '01-09', '01-11', '01-13', '01-15', '01-17', '01-19'
],
label : {
formatter : function(s) {
return s.slice(0, 7);
}
}
},
options : [
{
backgroundColor:'#228b22',
title : {
text : '2014世界杯',
subtext: '毕尔巴鄂竞技队 VS 巴塞罗那',
textStyle: {
color: '#FFFF00'
}
},
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 8,
itemStyle : {
normal: {
borderWidth:1,
color: 'blue',
lineStyle: {
type: 'solid'
}
}
},
effect : {
//show: true,
//color: 'black'
},
data : [
{name: '1伊莱索斯',
itemStyle:{normal:{color:'blue',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '伊莱索斯', geoCoord:[110, 296.913]},
{name: '马丁内斯2', value: '马丁内斯', geoCoord:[200, 200.913]},
{name: '阿莫雷比3', value: '阿莫雷比', geoCoord:[200, 400.913]},
{name: '伊劳拉4', value: '伊劳拉', geoCoord:[220, 150.913]},
{name: '奥尔特内策5', value: '奥尔特内策', geoCoord:[220, 450.913]},
{name: '伊图拉斯佩6', value: '伊图拉斯佩', geoCoord:[300, 200.913]},
{name: '德玛科斯7', value: '德玛科斯', geoCoord:[300, 400.913]},
{name: '苏塞塔8', value: '苏塞塔', geoCoord:[350, 110.913]},
{name: '赫雷拉9', value: '赫雷拉', geoCoord:[350, 296.913]},
{name: '穆尼亚因10', value: '穆尼亚因', geoCoord:[350, 510.913]},
{name: '洛伦特11', value: '洛伦特', geoCoord:[400, 296.913]},
//还有一仅仅球队
{name: '1巴尔德斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '巴尔德斯', geoCoord:[750, 296.913]},
{name: '2梅西',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '梅西', geoCoord:[450, 296.913]},
{name: '3皮克',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '皮克', geoCoord:[650, 200.913]},
{name: '4切拉诺',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '切拉诺', geoCoord:[650, 400.913]},
{name: '5阿尔维斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '阿尔维斯', geoCoord:[630, 150.913]},
{name: '6阿比达尔',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '阿比达尔', geoCoord:[630, 450.913]},
{name: '7蒂亚戈',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '蒂亚戈', geoCoord:[550, 200.913]},
{name: '8布茨克斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '布茨克斯', geoCoord:[580, 296.913]},
{name: '9雷加斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '雷加斯', geoCoord:[550, 400.913]},
{name: '10伊涅斯塔',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '伊涅斯塔', geoCoord:[480, 110.913]},
{name: '11比利亚',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '比利亚', geoCoord:[480, 510.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'伊莱索斯', geoCoord:[110, 296.913]},
{name:'马丁内斯', geoCoord:[200, 200.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 8,
itemStyle : {
normal: {
borderWidth:1,
color: 'blue',
lineStyle: {
type: 'solid'
}
}
},
effect : {
//show: true,
//color: 'black'
},
data : [
{name: '1伊莱索斯',
itemStyle:{normal:{color:'blue',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '伊莱索斯', geoCoord:[110, 296.913]},
{name: '马丁内斯2', value: '马丁内斯', geoCoord:[200, 200.913]},
{name: '阿莫雷比3', value: '阿莫雷比', geoCoord:[210, 420.913]},
{name: '伊劳拉4', value: '伊劳拉', geoCoord:[230, 140.913]},
{name: '奥尔特内策5', value: '奥尔特内策', geoCoord:[230, 460.913]},
{name: '伊图拉斯佩6', value: '伊图拉斯佩', geoCoord:[320, 210.913]},
{name: '德玛科斯7', value: '德玛科斯', geoCoord:[310, 390.913]},
{name: '苏塞塔8', value: '苏塞塔', geoCoord:[350, 110.913]},
{name: '赫雷拉9', value: '赫雷拉', geoCoord:[356, 286.913]},
{name: '穆尼亚因10', value: '穆尼亚因', geoCoord:[360, 516.913]},
{name: '洛伦特11', value: '洛伦特', geoCoord:[420, 306.913]},
//还有一仅仅球队
{name: '1巴尔德斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '巴尔德斯', geoCoord:[750, 296.913]},
{name: '2梅西',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '梅西', geoCoord:[450, 296.913]},
{name: '3皮克',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '皮克', geoCoord:[650, 200.913]},
{name: '4切拉诺',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '切拉诺', geoCoord:[650, 400.913]},
{name: '5阿尔维斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '阿尔维斯', geoCoord:[630, 150.913]},
{name: '6阿比达尔',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '阿比达尔', geoCoord:[630, 450.913]},
{name: '7蒂亚戈',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '蒂亚戈', geoCoord:[550, 200.913]},
{name: '8布茨克斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '布茨克斯', geoCoord:[580, 296.913]},
{name: '9雷加斯',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '雷加斯', geoCoord:[550, 400.913]},
{name: '10伊涅斯塔',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '伊涅斯塔', geoCoord:[480, 110.913]},
{name: '11比利亚',
itemStyle:{normal:{color:'red',label:{show:true,color:'red',textStyle:{color:'white',fontSize:'12'}}}},
value: '比利亚', geoCoord:[480, 510.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'马丁内斯', geoCoord:[200, 200.913]},
{name:'马丁内斯', geoCoord:[200, 200.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
},
{
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自己定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="col-md-8">
<div id="main" class="main" style="height: 530px;"></div>
<div>
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
<span class="text-primary">切换主题</span>
<select id="theme-select"></select>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
知识点不难。就是看个人创意组合了，通过样例举一反三，才干写出更美丽的程序来。 谢谢
