Echarts堆叠柱状图显示百分比
效果图js代码效果图
js代码
//各行业企业分布情况function showBar1 (x,data) {var chart = echarts.init(document.getElementById('bar2'))chart.setOption({tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},formatter:function(datas){var res = datas[0].name + '<br/>', val;let percent = '';if(datas[0].value=='0'){percent = 0;}else{percent = ((datas[1].value / datas[0].value) * 100).toFixed(2);}let dotColor0 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[0].color + '"></span>'let dotColor1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[1].color + '"></span>'res += dotColor0 + datas[0].seriesName + ": " + datas[0].value + '</br>';res += dotColor1 + datas[1].seriesName + ": " + datas[1].value + '</br>';res += '覆盖率: ' + percent + '%' + '</br>'return res; }},legend: {data: ['企业数', '安责险企业数'],textStyle: {color: '#97B8C9',fontSize: 16},left: '50%',top: '10%',},grid: {top: '30%',left: '3%',right: '5%',bottom: '15%',containLabel: true},dataZoom: [{show: true,bottom: '4%',start: 0,end: 70,height: 20,backgroundColor: 'rgba(9,75,127,0.2)',fillerColor: '#094B7F',borderColor: '#094B80',textStyle: {color: '#97B8C9'}}],xAxis: [{type: 'category',data: x,splitLine: {lineStyle: {color: '#07274D'}},axisLine: {lineStyle: {color: '#07274D'}},axisTick: {lineStyle: {color: '#1178C9'}},axisLabel: {interval: 0,textStyle: {color: '#97B8C9',fontSize: 14},formatter: function (v) {if (v.length > 5) {return v.substring(0, 5) + '...';}return v;}}}],yAxis: [{type: 'value',axisLabel: {textStyle: {color: '#97B8C9',fontSize: 16}},axisLine: {show: true,lineStyle: {color: '#07274D'}},axisTick: {lineStyle: {color: '#1178C9'}},splitLine: {show: false}}],series: [{name: '企业数',type: 'bar',barGap: '-100%', // Make series be overlap// barWidth: '50%',yAxisIndex: 0,data: data.entNum,itemStyle: {normal: {color: '#199ed8'}},label: {normal: {show: true,position: 'top',fontSize: 16}},barWidth : 35},{name: '安责险企业数',type: 'bar',yAxisIndex: 0,data: data.entBxNum,itemStyle: {normal: {color: '#008000'}},label: {normal: {show: true,position: 'top',fontSize: 16}},barWidth : 35}]})$(window).resize(function () {chart.resize()})return chart}
