修改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]
}
]
};
实际效果图下: