echarts提示框,樣式重寫


option = {
    title: {
        text: 'iphone銷量',
        subtext: '純屬虛構'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params, ticket, callback) {
                var htmlStr = '';
                for(var i=0;i<params.length;i++){
                    var param = params[i];
                    var xName = param.name;//x軸的名稱
                    var seriesName = param.seriesName;//圖例名稱
                    var value = param.value;//y軸值
                    var color = param.color;//圖例顏色
                    if(i===0){
                        htmlStr += xName + '<br/>';//x軸的名稱
                        }
                    htmlStr +='<div>';
                    //為了保證和原來的效果一樣,這里自己實現了一個點的效果
                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                    //圓點后面顯示的文本
                    htmlStr += seriesName + ':' + value + ' '+value+'%';
                    htmlStr += '</div>';
                    }
                    return htmlStr;
                    }
        },
        grid : {
                left: '10%',//默認10%
                top:100,//越大越靠下,默認60
                right : '5%',//默認10% 
                bottom : 500//默認60
        },
        legend: {
                data:['iphone6','iphone7','iphone8']
        },
        xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
                type: 'value'
        },
        series: [{
                name: 'iphone6',
                type: 'line',
                smooth: true,
                data: [10, 12, 21, 54, 260, 830, 710]
        },
        {
            name: 'iphone7',
            type: 'line',
            smooth: true,
            data: [30, 182, 434, 791, 390, 30, 10]
        },
        {
            name: 'iphone8',
            type: 'line',
            smooth: true,
            data: [1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
    
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM