使用echarts画百分比排名柱状图
作者: 图恩分类: 编程开发阅读: 789发布时间： 2020-07-13 13:18:05
使用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里面设置，而且可以根据排名设置字体不同的颜色。
发表评论 (审核通过后显示评论)：