百度echart 折线图堆叠,y轴显示百分号(%)以及tooltip提示框格式自定义
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+"
"; for(var i=0;i<params.length;i++){html+=''html+=params[i].seriesName+":"+params[i].value+"%
"; } 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+"
"; for(var i=0;i<params.length;i++){html+=''html+=params[i].seriesName+":"+params[i].value+"%
"; } 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] } ] };
实际效果图下: