echarts柱⼦背景图象形柱图PictorialBar实现需求：
如图所⽰。不同颜⾊代表不同⽔位数据。当前⽔位达到多少红⾊框覆盖到哪⾥。
逻辑就是利⽤echarts的PictorialBar，在每⼀个柱状图内添加图⽚作为背景，然后设置柱状图柱⼦颜⾊和透明度。
这是我做这个功能时参考例⼦：
最后贴上我⾃⼰的代码
const rocket = '/testimg/yanse.png'//这个就是背景图⽚地址。
option={
color:["rgba(0,0,0,0)"],
title:{
show:true,//显⽰策略，默认值true，可选为：true（显⽰） | false（隐藏）
text: '风暴潮',//主标题⽂本，'\n'指定换⾏
x:'center',//⽔平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y:'top',
textStyle: {//主标题⽂本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
color:'#ffffff',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
}},
fontweight默认值grid:{ right:0,left:0,bottom:0,top:'30%'},
tooltip: {
trigger: 'axis',
axisPointer: {            // 坐标轴指⽰器，坐标轴触发有效
type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{b1}: {c1}'
},
yAxis: {
type: 'value',
show:false
},
xAxis: {
type: 'category',
show:false,
data: ['实时','预报'],
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',  //更改坐标轴⽂字颜⾊
fontSize : 10    //更改坐标轴⽂字⼤⼩
}
},
axisLine:{
lineStyle:{
color:'#ffffff' //更改坐标轴颜⾊
}
},
},
series: [
{
type: 'pictorialBar',//在象形柱图中 type 属性值为 'pictorialBar'。
name: '',
symbol:'image://'+rocket,//写在data外默认所有柱状图背景图⽚。若想单独设置某个在data数组内单个设置symbol
//图⽚地址图⽚⽀持svg等不同格式写法稍有不同。本例是项⽬中png格式图⽚地址。
//有条件最好使⽤svg图。免得图⽚不清楚
z: 1,//有点类似css中的z-index图⽚层堆叠顺序越⼤图⽚越在外层我设置为1做为背景图在下⾯
data:[
{
value: 5,
symbolSize: [
'80%', //  图⽚在柱⼦内宽度.
'100%' //图⽚在柱⼦内⾼度.
]
},
{
value: 5,
symbolSize: [
'80%', // 50% of the width of reference bar.
'100%' // 100% of the height of reference bar.
]
}
]
},
{
type: 'bar',
name: 'reference bar',
barGap: '-100%',
color:'rgba(255,192,0,0.8)',
data: [2.83,2.56]
}
]
}
代码效果图：
z:10效果：背景图在柱状图上
由此可以发散思维：在做⽴体柱状图效果的时候可以⼀个⽴体柱当做背景将宽⾼都设置为完成100%即可。⽴体柱状图链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。