百度echart 折线图堆叠，y轴显示百分号（%）以及tooltip提示框格式自定义

 修改y轴为百分比%代码示例如下

yAxis: [  
        {  
            type: 'value',  
            axisLabel: {  
                  show: true,  
                  interval: 'auto',  
                  formatter: '{value} %'  
                },  
            show: true  
        }  
    ],  

修改鼠标移到折线图上提示框的样式代码如下，不知道什么意思的可以console.log看一下！

tooltip:{
                    trigger: 'axis',
                    formatter: function (params) {
                        var html=params[0].name+"<br>";
                        for(var i=0;i<params.length;i++){
                            html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'

                            html+=params[i].seriesName+":"+params[i].value+"%<br>";

                        }
                        return html;
                    }
                },

 折线图百分比完整代码如下

var option = {
                backgroundColor: '#ffffff',
                // title: {
                //     text: '折线图堆叠'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['日平均值', '日巅峰值']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    //设置y轴显示为%
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                    show: true
                },
                tooltip:{
                    trigger: 'axis',
                    //tooltip提示框格式自定义
                    formatter: function (params) {
                        var html=params[0].name+"<br>";
                        for(var i=0;i<params.length;i++){
                            html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-            color:'+params[i].color+';"></span>'

                            html+=params[i].seriesName+":"+params[i].value+"%<br>";

                        }
                        return html;
                    }
                },
                series: [


                    {
                        name: '日平均值',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '日巅峰值',
                        type: 'line',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }




                ]


            };

实际效果图下：