码迷，mamicode.com
首页 > 其他好文 > 详细

CSDN开源夏令营 百度数据可视化实践 ECharts（5）

时间：2014-07-29 17:58:52      阅读：411      评论：0      收藏：0      [点我收藏+]

标签：百度   zrender   数据可视化   echarts   javascript   

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上
 （2）timeline属性（时间轴，每个图表最多仅有一个时间轴控件）
  
名称 默认值 描述
{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）的例子。
  首先上图：
  bubuko.com,布布扣


 （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>
 
 知识点不难，就是看个人创意组合了，通过例子举一反三，才能写出更漂亮的程序来！ 谢谢


CSDN开源夏令营 百度数据可视化实践 ECharts（5）,布布扣,bubuko.com

CSDN开源夏令营 百度数据可视化实践 ECharts（5）

标签：百度   zrender   数据可视化   echarts   javascript   

原文地址：http://blog.csdn.net/u013476464/article/details/38271415
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！