象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上。
先上一个简单的效果:
其实实现思路主要在于:绘制具有颜色定义的背景以及对应的数据标识列,废话咱也不多说,直接上代码,此代码可直接复制至echarts官网运行查看。
var maxData = 2000;
option = {
grid: {
left: '3%',
right: '4%',
bottom: '2%',
containLabel: true
},
xAxis: {
axisLine:{
show:false // 是否显示坐标轴
},
axisTick: {
show: false //是否显示坐标轴刻度
},
data: ['手术室','CT室','心内科','口腔科','ICU室','眼科','放射科','导管室','供应室','神外科']
},
yAxis: {
max:maxData,
show:false,
},
series: [{
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [50, 10],
color:'#7f71e2',
symbolRepeat: true,
symbolBoundingData: maxData,
data: [
{
value:120,
itemStyle: {
color:'#7f71e2'
}
},{
value:110,
itemStyle: {
color:'#4aa1e1'
}
},{
value:130,
itemStyle: {
color:'#6494db'
}
},{
value:450,
itemStyle: {
color:'#159be4'
}
},{
value:345,
itemStyle: {
color:'#4ebcff'
}
},{
value:784,
itemStyle: {
color:'#05d4b5'
}
},{
value:103,
itemStyle: {
color:'#2fcd97'
}
},{
value:403,
itemStyle: {
color:'#23d2c9'
}
},{
value:563,
itemStyle: {
color:'#80d985'
}
},{
value:132,
itemStyle: {
color:'#a6c34c'
}
}
],
z:10
},{
type: 'pictorialBar',
itemStyle: {
normal: {
opacity: 0.2,
barBorderRadius: 100
}
},
animationDuration: 0,
symbolRepeat: 'fixed', //使图形元素重复
symbol: 'rect',
symbolSize: [50,10],
symbolBoundingData: maxData,
data: [
{
value:120,
itemStyle: {
color:'#7f71e2'
}
},{
value:110,
itemStyle: {
color:'#4aa1e1'
}
},{
value:130,
itemStyle: {
color:'#6494db'
}
},{