ECharts · Example

// 自定義擴展圖表類型：mapType = body
require('echarts/util/mapData/params').params.football = {
    getGeoJson: function (callback) {
        $.ajax({
            url: "svg/football.svg",
            dataType: 'xml',
            success: function(xml) {
                callback(xml)
            }
        });
    }
}
option = {
    backgroundColor:'#228b22',
    title : {
        text : '2014世界盃',
        subtext: '地圖SVG擴展',
        textStyle: {
            color: '#fff'
        }
    },
    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 : 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]}
                    ]
                ]
            }
        }
    ]
};

切換主題