echarts提示框，样式重写

Posted 2020-11-27 php0222wangdong

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]
        }
    ]
    
};