ECharts · Example

// 自定義擴展圖表類型：mapType = continent 大洲地圖
require('echarts/util/mapData/params').params.continent = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/continent_geo.json',callback);
    }
}
option = {
    title : {
        text : '金棕櫚 智慧旅行@雲數據',
        subtext: 'by 江江的喵',
        link: 'http://www.palmyou.com/',
        sublink: 'http://weibo.com/u/2813464944'
    },
    tooltip : {
        trigger: 'item',
        formatter: function (params){
            var value = params.value + '萬人次 （' + (params.value/98.19).toFixed(2) + '%）';
            return params.seriesName + '<br/>' + params.name + ' : ' + value;
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 0,
        max: 1000,
        text:['熱', '冷'],
        splitNumber:0,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '2013年出境目的地（洲際統計）',
            type: 'map',
            mapType: 'continent', // 自定義擴展圖表類型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '亞洲', value: 8967.69},
                {name: '大洋洲', value: 592.09},
                {name: '歐洲', value: 183.62},
                {name: '北美洲', value: 41.63},
                {name: '南美洲', value: 10.41},
                {name: '非洲', value: 22.5837}
            ],
            // 文本位置修正
            textFixed : {
                '大洋洲' : [265, 0],
                '非洲' : [10, -30],
                '北美洲' : [20, 0],
                '南美洲' : [0, -10],
                '亞洲' : [20, -30],
                '歐洲' : [200, -10],
            }
        }
    ]
};

// 自定義擴展圖表類型：mapType = continent 大洲地圖
// 自定義擴展圖表類型：mapType = continent 大洲地圖
require('echarts/util/mapData/params').params.continent = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/continent_geo.json',callback);
    }
}
option = {
    title : {
        text : '金棕櫚 智慧旅行@雲數據',
        subtext: 'by 江江的喵',
        link: 'http://www.palmyou.com/',
        sublink: 'http://weibo.com/u/2813464944'
    },
    tooltip : {
        trigger: 'item',
        formatter: function (params){
            var value = params.value + '萬人次 （' + (params.value/98.19).toFixed(2) + '%）';
            return params.seriesName + '<br/>' + params.name + ' : ' + value;
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 0,
        max: 1000,
        text:['熱', '冷'],
        splitNumber:0,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '2013年出境目的地（洲際統計）',
            type: 'map',
            mapType: 'continent', // 自定義擴展圖表類型
            itemStyle:{
                normal:{label:{show:true}},
 
 
 

切換主題