echarts在柱状图轴线上添加图片
作者: 图恩分类: 编程开发阅读: 1323发布时间： 2020-07-13 13:13:05
在一些柱状图数据比如天气数据、男女比例等信息，在轴线上面加上图片可以更直观的查看数据。
效果图：
image.png
/**
* 画轴线带图片的柱状图
* @param container 容器
* @param seriesData 图表数据
*/
function drawImageBar(container, seriesData) {
var myCharts = echarts.init(document.getElementById(container));
var myOption = {
color: ['#7473FF'],
grid : {
left : '4%',
right : '4%',
bottom : '4%',
top : 30,
//图形位置包含坐标轴的刻度标签
//如果图形位置调整好却不包含坐标轴，坐标轴信息会显示不全
containLabel : true
},
xAxis: {
axisLine : {
show : false
},
splitLine : {
show : true,
lineStyle: {
color: '#1D3039'
}
},
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
},
},
yAxis: {
type: 'category',
data: ['woman', 'man'],
//y轴线样式
axisLine : {
show : false
},
//设置与x轴平行的线(分割线)不显示
splitLine : {
show : false,
},
axisLabel: {//#1D3039
formatter: function (value) {
console.log(value)
return '{' + value + '| }\n{value|' + value + '}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center',
color: 'white'
},
woman: {
height: 40,
align: 'center',
backgroundColor: {
image: './img/woman.png'
}
},
man: {
height: 40,
align: 'center',
backgroundColor: {
image: './img/man.png'
}
}
}
}
},
series: [
{
type: 'bar',
barWidth: '20',
data: seriesData,
//柱状图说明信息样式
label: {
normal: {
show: true,
position: 'right',
distance: 20,
color: 'white',
backgroundColor: '#7473FF',
padding: 5,
borderRadius: 10
}
},
}
]
};
myCharts.setOption(myOption);
}
调用方式：
var seriesData = [ {
value : 55
}, {
value : 45
} ];
drawImageBar('bar', seriesData);
在yAxis中有一个rich设置，可以设置y轴的展示方式，比如添加图片等。
其他说明，在series中的label设置中，可以设置柱状图文字说明的样式。
发表评论 (审核通过后显示评论)：