首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts(5)
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。见下图。 支持百分比(字符串),如‘50%‘(显示区域一半的宽度) |
{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>
知识点不难,就是看个人创意组合了,通过例子举一反三,才能写出更漂亮的程序来! 谢谢
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。