效果如图:
//作业率 lineOption4: { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { color: '#fff' }, crossStyle: { color: '#6d7882' } }, formatter: function(datas) { console.log('datas', datas) let res = datas[0].name + '<br/>' for (let i = 0, length = datas.length; i < length; i++) { res += datas[i].seriesName + ':' + datas[i].data.value + '%<br/>' } return res } }, legend: { right: '0%', data: [ '日历作业率', '有效作业率', '年度日历作业率', '年度有效作业率' ], textStyle: { fontSize: 12 }, show: true }, grid: [ { show: true, top: '19%', left: '0%', right: '0%', bottom: '4%', containLabel: true } ], xAxis: [ { type: 'category', axisLine: { lineStyle: { color: '#d4d7da' } }, splitLine: { show: true, lineStyle: { color: '#d4d7da' } }, data: [] } ], yAxis: [ //y轴左侧代表值 { type: 'value', name: '', position: 'left', alignTicks: true, splitNumber: 5, // min: 0, // interval: Math.ceil(Math.ceil(Math.max(100)) / 5), // max: Math.ceil(Math.ceil(Math.max(100)) / 5) * 5, axisLine: { show: false /* lineStyle: { color: '#d4d7da' }*/ }, splitLine: { show: true, lineStyle: { color: '#d4d7da' } }, axisLabel: { formatter: '{value}%' } } ], series: [ { name: '日历作业率', type: 'bar', barGap: 0.2, barWidth: 32, data: [], color: '#6554C0', //柱状图显示上方数字 label: { normal: { //柱状图上方文字加百分号 formatter: function(params) { return params.value + '%' }, show: true, position: 'top', textStyle: { color: '#606266' } } } }, { name: '有效作业率', type: 'bar', barGap: 0.2, barWidth: 32, data: [], color: '#3F92F3', //默认柱状图颜色 //柱状图显示上方数字 label: { normal: { //柱状图上方文字加百分号 formatter: function(params) { return params.value + '%' }, show: true, position: 'top', textStyle: { color: '#606266' } } } }, { name: '年度日历作业率', type: 'line', data: [], color: '#6554C0' //默认颜色 }, { name: '年度有效作业率', type: 'line', data: [], color: '#3F92F3' //默认颜色 } ] }
标签:百分比,自定义,show,color,type,data,柱状图,true From: https://www.cnblogs.com/zqlym/p/17046091.html