echarts柱状图铺满_使用echarts画百分比排名柱状图

使用echarts画排名信息，可以保证在固定大小的容器中完美展现，不会出现文字和图画越界问题。

效果图：

image.png

/**

* 画占比图

* @param {String} container 容器

* @param {JSON} yData Y轴数据

* @param {JSON} ratio 占比数据

* @param {JSON} surplus 剩余数据

*/

function drawPercentage(container, yData, ratio, surplus) {

var myChart = echarts.init(document.getElementById(container));

var option = {

grid: {

left: '8%',

right: '8%',

bottom: '4%',

top: 10,

containLabel: true

},

xAxis: {

show: false

},

yAxis: {

type: 'category',

inverse: true,

//城市名称

data: yData,

axisTick: {

show: false

},

axisLine: {

show: false

},

axisLabel: {

show: true,

color: function (value, index) {

if(index == 0) {

return 'red';

}

if(index == 1) {

return '#ff8447';

}

if(index == 2) {

return '#ffcc00';

}

return 'rgb(18,205,12)'

},

fontSize: 15,

fontWeight: 'bold'

},

},

series: [

{

type: 'bar',

stack: 'chart',

z: 3,

barWidth: '20',

itemStyle: {

normal: {

color: new echarts.graphic.LinearGradient(1,

0, 0, 1, [{

offset: 0,

color: '#2A6BCD'

}, {

offset: 1,

color: '#34F6F8'

}])

}

},

label: {

normal: {

position: 'right',

show: true,

color: 'white',

formatter: '{c}%'

}

},

data: ratio

},

{

type: 'bar',

stack: 'chart',

barWidth: '20',

itemStyle: {

normal: {

color: '#0D2253'

}

},

data: surplus

}]

}

myChart.setOption(option);

}

调用方式：

var yData = ["河北", "北京", "天津", "河南", "山东", "内蒙", "宁夏", "陕西", "四川", "湖南"];

//百分比数据

var ratio = [45, 12, 10, 7, 6, 5, 5, 4, 3, 2];

//100%-ratio

var surplus = [55, 88, 90, 93, 94, 95, 95, 96, 97, 98];

drawPercentage('regionDetail', yData, ratio, surplus);

关于柱状图的颜色过度和颜色配置，可以在series中调整。

关于排名文字信息样式可以在yAxis中的axisLabel里面设置，而且可以根据排名设置字体不同的颜色。