echarts 3 tooltip formatter 自定義function

效果:iphone

代碼以下:rest

var phone = {"iphone3":
                [{name: '北京',value: 300},
                {name: '天津',value: 200},
                {name: '上海',value: 300},
                {name: '廣東',value: 50}],
            "iphone4":
                [{name: '北京',value: 40},
                {name: '天津',value: 30},
                {name: '上海',value: 10},
                {name: '廣東',value: 50}],
            "iphone5": 
                [{name: '北京',value: 1 },
                {name: '天津',value: 2 },
                {name: '上海',value: 4 },
                {name: '廣東',value: 5 }]
            };
option = {
    title: {
        text: 'iphone銷量',
        subtext: '純屬虛構',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (a) {
            tip = a.name;
            for(var o in phone) {
                obj = phone[o];
                for (var j in obj) {
                    if(a.name == obj[j].name) {
                        tip += "<br>" + o + ":" + obj[j].value; 
                    }
                }
            }
            return tip ? tip : 'Loading';
        }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['iphone3','iphone4','iphone5']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本,默認爲數值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:phone.iphone3
        },
        {
            name: 'iphone4',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:phone.iphone4
        },
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:phone.iphone5
        }
    ]
};orm

該代碼放到官網的樣例中能夠直接運行ip

相關文章
相關標籤/搜索