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

最新推荐文章于 2023-12-15 14:39:05 发布
最新推荐文章于 2023-12-15 14:39:05 发布
阅读量5.2k 收藏 1
点赞数 3
分类专栏： 【开源夏令营】 ECharts开发 文章标签： 百度 ZRender 数据可视化 Echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013476464/article/details/38271415
版权

Echarts map 

 谢谢林峰老师的辛勤指导！


本节内容：熟练掌握map和时间轴的搭配
（1）map基本属性

名称 默认值 描述
{boolean | string}selectedModenull选中模式，默认关闭，可选single，multiple
{string} mapType'china'地图类型，支持world，china及全国34个省市自治区。省市自治区的mapType直接使用简体中文： 
新疆， 西藏， 内蒙古， 青海， 四川， 黑龙江， 甘肃， 云南， 广西， 湖南， 陕西， 
广东，吉林， 河北， 湖北， 贵州， 山东， 江西， 河南， 辽宁， 山西， 安徽， 福建， 
浙江， 江苏，重庆， 宁夏， 海南， 台湾， 北京， 天津， 上海， 香港， 澳门' 
支持子区域模式，通过主地图类型扩展出所包含的子区域地图，格式为'主地图类型|子区域名称'，如 
'world|Brazil'，'china|广东'，详见例子 this 》
{boolean} hoverabletrue非数值显示（如仅用于显示标注标线时），可以通过hoverable:false关闭区域悬浮高亮
{Object} mapLocation{x:'center',y:'center'}地图位置设置，默认只适应上下左右居中可配x，y，width，height，任意参数为空都将根据其他参数自适应
{string}mapValueCalculation'sum'地图数值计算方式，默认为加和，可选为：'sum'（总数） | 'average'（均值）
{number}mapValuePrecision0地图数值计算结果小数精度，mapValueCalculation为average时有效，默认为取整，需要小数精度时设置大于0的整数
{boolean}showLegendSymboltrue显示图例颜色标识（系列标识的小圆点），存在legend时生效
{boolean} roamfalse是否开启滚轮缩放和拖拽漫游
{Object} scaleLimitnull滚轮缩放的极限控制，可指定{max:number, min:number}，其中max为放大系数，有效值应大于1，min为缩小系数，有效值应小于1
{Object} nameMapnull自定义地区的名称映射，如{'China' : '中国'}
{Object} textFixednull地区的名称文本位置修正，数值单位为px，正值为左下偏移，负值为右上偏移，如{'China' : [10, -10]}
{Object} geoCoordnull通过绝对经纬度指定地区的名称文本位置，如{'Islands':[113.95, 22.26]}，香港离岛区名称显示定位到东经113.95，北纬22.26上
 （2）timeline属性（时间轴，每个图表最多仅有一个时间轴控件）
  
名称 默认值 描述
{boolean} showtrue显示策略，可选为：true（显示） | false（隐藏）
{string} type'time'模式是时间类型，时间轴间隔根据时间跨度计算，可选为：'number'
{boolean} notMergefalse时间轴上多个option切换时是否进行merge操作，同setOption第二个参数（详见实例方法）
{boolean} realtimetrue拖拽或点击改变时间轴是否实时显示
{number | string} x80时间轴左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
{number | string} ynull时间轴左上角纵坐标，数值单位px，支持百分比（字符串），默认无，随y2定位，如'50%'(显示区域纵向中心)
{number | string} x280时间轴右下角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
{number | string} y20时间轴右下角纵坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域纵向中心)
{number} width自适应时间轴宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2。见下图。 
支持百分比（字符串），如'50%'(显示区域一半的宽度)
{number} height50时间轴高度，数值单位px，支持百分比（字符串），如'50%'(显示区域一半的高度)
{color}backgroundColor'rgba(0,0,0,0)'背景颜色，默认透明。
{number}borderWidth0边框线宽
{color} borderColor'#ccc'边框颜色。
{number | Array}padding5内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
{string}controlPosition'left'播放控制器位置，可选为：'left' | 'right' | 'none'
{boolean} autoPlayfalse是否自动播放
{boolean} looptrue是否循环播放
{number}playInterval2000播放时间间隔，单位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} symbolSize4轴点symbol，同serie.symbolSize
{number}currentIndex0当前索引位置，对应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="#" οnclick="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" οnclick="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>
 
 知识点不难，就是看个人创意组合了，通过例子举一反三，才能写出更漂亮的程序来！ 谢谢


u013476464
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
echarts地图svg拓展实例
02-22
开始在使用echarts地图的svg拓展的时候遇到required('echarts/util/mapData/params').params这里一直报错，在网上也没有很好的解释，然后就有了这个demo，给大家在学习echarts的时候提供一些方便
ECharts简单样例
02-12
demo
echarts考试分数统计图表实例
06-24
echarts考试分数统计图表实例是一款vue基于echarts绘制雷塔图，蜘蛛网图，不规则多边形，网络图表。
echarts2.2.7 自定义svg地图引入。
weixin_58343452的博客
05-17 1717
做这个文章，是憋了一肚子火，echarts官网对echarts2.2.7的教程和配置很少，对老手还行，但是对新手，并不友好。那个什么劳什子AMD方式引入，require按需引入，对我来说太麻烦了，不缺那点流量，只想尽快整出来。网上四处找例子，在猴岛上看到一个例子，还需要代价才能下载，那个火啊。后面自己琢磨了半天，终于融汇贯通，知道怎么引入了。 echarts2.2.7下载地址。https://codeload.github.com/apache/echarts/zip/2.2.7。 直接贴代码。其中，e
Echarts自适应问题解决方案
天火流光的博客
04-21 558
在项目中使用了 vue-echarts 虽然提供了 autoresize 用来自适应 但有时侯我们的窗体根本不会改变大小… 详见
数据可视化--Echarts库.rar
12-08
智能看板---数据可视化展示案例---插件动态换算rem值+Echarts库（一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11XQ，Chrome，Firefox，Safari等...
Echarts数据可视化图表案例
01-11
ECharts是一款由百度开源的数据可视化库，它基于JavaScript，提供了丰富的图表类型，如柱状图、饼图、折线图、散点图、热力图、地图等，用于直观、生动地展示数据。ECharts的特点在于其易用性、灵活性和高性能，能够...
基于Vue和Echarts的数据可视化大屏设计源码
最新发布
03-28
Echarts是百度开源的一个强大的数据可视化库，它支持多种图表类型，如折线图、柱状图、饼图等，并且具有良好的交互性和自适应性。Echarts与Vue结合，通过Vue的插件机制，可以方便地在Vue组件中嵌入图表，实现数据...
数据可视化大屏Echarts，这里就是你想要的数据可视化大屏
04-29
Echarts 是一个由百度开源的、基于 JavaScript 的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图和地图，适合用于构建数据可视化大屏。在本教程中，我们将探讨如何利用 Echarts、HTML 和 vscode ...
6【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-互联网大数据统计
03-26
YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码） https://yydatav.blog.csdn.net/article/details/123652970 另有：2&TLZ【源码】数据可视化：基于Echarts&PyQT&Flask实现的动态实时...
[vue]echarts的使用问题
前端
04-19 535
可以直接按照官网的方法使用 官网的例子是个 PieChart ，而在实践过程中使用的是个 BarChart 发现 PieChart 可以正常展示，但是 BarChart 的渲染存在问题，对比后发现options 比Pie多了一个配置项xAxis/yAxis,猜测是缺少相关的组件引起的 因为官网内容不全面，只能到本地node_modules模块查看所有的echarts/components，并测试，最终发现是 GridComponent 组件 import VChart from "vue-echart
Echarts实现根据窗口大小自适应
王的博客
12-15 704
echarts大小根据窗口自适应。
vue开发图表echarts基本使用
可可的博客
07-07 2676
提供很多图标，用户且可自行修改。性能好可流畅远行PC和移动设备。3.echarts-基础配置。1.echarts-介绍。上面是引入了下面两个图表。
echarts 仪表盘配置
qq_45778558的博客
05-11 3000
echarts 仪表盘配置
vue-echarts基本使用
热门推荐
03-18 6万+
1，安装vue-echarts cnpm i -S vue-echarts 2,main.js中全局注册组件 import ECharts from 'vue-echarts/components/ECharts' Vue.component('v-chart', ECharts) 3，修改echarts 在项目的node-modules文件夹中根据路径：vue-echarts/co...
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
echarts属性的设置（完整大全）
weixin_38169886的博客
08-08 1927
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...
echarts使用carousel走马灯显示问题
weixin_42381896的博客
03-07 3353
echarts在配合el-carousel循环展示时，显示异常问题问题复现问题原因解决 问题复现 当我们使用el-carousel包含echarts时，不需要循环，展示的ecahrts图也只有100px宽度，无论echarts图有没有宽度，都限定了100px。如下图展示： 后面就想了一下会不会是宽度的问题，所以样式里面直接把canvas的宽度拉满，结果： 整个都模糊了。 问题原因 查阅了很多网上内容，发现当echarts拿不到页面的宽度的时候，会默认展示100px，所以到这里我想了一下，会不会是因为页面
echarts中国地图使省份选择性滑动或点击高亮
帆酱的博客
07-26 2万+
本文介绍echarts显示中国省份图，对于需要高亮的省份进行筛选。并且对省份进行选择性交互。 首先我们需要一个颜色集合，代表我们要设置多少种颜色。这里用到了dataRange。 dataRange: { show:false, x: 'left', y: 'bottom', splitList: [ ...
ECharts数据可视化项目实践pdf
07-29
很抱歉，我无法提供ECharts数据可视化项目实践的PDF文件。但是，根据引用\[1\]和引用\[3\]的描述，这本《ECharts数据可视化：入门、实战与进阶》是一本非常适合初学者和进阶开发者的实战类教程，可以帮助读者快速...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值