echarts 叠加柱状图柱顶显示百分比

采坑：

formatter不起作用：使用 formatter: function (params) 只能直接setOption，不能使用this.option
柱顶的百分比其实是一个另一截的柱，只是颜色为白色，值小于1；然后使用 formatter: function展示为百分比

    renderChart () {// 线上问题总量柱状图，按产研部门统计（如教学、服务运营）var chart1Line = echarts.init(document.getElementById('chart1'))if (this.caughtStatus === '1') {// var optionChart2 = this.echarts.init(document.getElementById('allData'))if (this.departments.restData.length !== 0) {chart1Line.setOption({grid: {bottom: '25%'},title: {text: '线上问题拦截率（' + this.departments.caught + '%）',x: 'center'},tooltip: {trigger: 'axis',formatter: function (params) {console.log('22')console.log(params)var display = params[0].axisValue + '<br>已拦截：' + params[0].data + '<br>未拦截：' + params[1].data + '<br>拦截率：' + params[2].data * 100 + '%'return display// if (params.data > 0) {//   return (params.data * 100) + '%'// } else {//   return params.data// }}},legend: {orient: 'vertical',x: '85%',y: 'top',itemWidth: 15,itemHeight: 15,data: ['已拦截', '未拦截', '']},xAxis: {name: '',type: 'category',data: this.departments.departments,axisLabel: {interval: 0,rotate: -30}},yAxis: {type: 'value',name: '单位(个)'},series: [{name: '已拦截',type: 'bar',stack: '拦截情况',data: this.departments.restData,itemStyle: {color: '#3FBB49'},label: {show: true,position: 'inside',textStyle: {color: 'black'}},barWidth: '40px'},{name: '未拦截',type: 'bar',stack: '拦截情况',data: this.departments.onlineData,itemStyle: {color: '#FF8849'},label: {show: true,position: 'inside',formatter: function (params) {if (params.value > 0) {return params.value} else {return ''}},textStyle: {color: 'black'}},barWidth: '40px'},{name: '拦截率',type: 'bar',stack: '拦截情况',data: this.departments.caughtRate,itemStyle: {color: '#FFFFFF'},label: {show: true,position: 'insideBottom', // 关键formatter: function (params) {if (params.data > 0) {return (params.data * 100) + '%'} else {return ''}},textStyle: {color: 'black'}},barWidth: '40px'}]})}

echarts 叠加柱状图柱顶显示百分比相关推荐

Echarts升级2：柱状图头部显示百分比、同时内容在弹框显示
目录需求及技术说明: 效果图: 根据排污口的排口情况应用echarts的柱状图: 详解1:头部添加百分比详解2:在弹框不出现百分比详解3:一种参数同时出现两种值,并且分别展现需求及技术说明: ...
R语言ggplot2可视化百分比显示实战：纵轴显示为百分比、在柱状图上显示百分比、按照因子变量绘制分组子图（纵轴显示为百分比）、可视化图中显示数据百分比
R语言ggplot2可视化百分比显示实战:纵轴显示为百分比.在柱状图上显示百分比.按照因子变量绘制分组子图(纵轴显示为百分比).可视化图中显示数据百分比目录
echarts 堆叠柱状图label显示总和
记录一下使用echart的柱状图堆叠时,需要在柱状图顶部显示总计数值的问题.参考文章的实现,再堆叠一个透明的柱状图来显示总和数据标签,最后就是在触发legend切换时,更换option.缺点是切换le ...
escharts 柱状图百分比,关于echarts的柱状图如何以百分比显示的问题
option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 's ...
echart饼状图、柱状图上显示百分比、数据值
柱状图: echart 3.0写法: series:[{label: {normal: {show: true,position: 'inside',formatter: '{c},({d}%)'// ...
ECharts制作饼图，显示百分比、指示线
效果图: html模块 <template><div><div id="ipage-chart-send" ref="send" ...
echarts 饼图提示框显示百分比
设置提示框浮层内容格式器,将tooltip属性中的formatter值写成百分比形式 tooltip : { trigger: 'item', formatter: '{a} <br/>{ ...
echarts，柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?

echarts 叠加柱状图柱顶显示百分比

echarts 叠加柱状图柱顶显示百分比相关推荐

最新文章

热门文章