> 文档中心 > 百度echart 折线图堆叠,y轴显示百分号(%)以及tooltip提示框格式自定义

百度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+"
"; 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] } ] };

实际效果图下: