样式入上图,这个真是费劲啊(可能由于本人较菜),图片已经转成svg,如果有本地的图片可按照注释方式去引入
option = {
// backgroundColor: 'transparent',
grid: {
left: '0%',
top: '0%',
right: '85',
bottom: '0%',
containLabel: true
},
xAxis: [
{
show: false
}
],
yAxis: [
{
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: '#fff', //y轴字体颜色
fontSize: '10',
fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
fontWeight: '500'
}
},
data: ['topic5', 'topic4', 'topic3', 'topic2', 'topic1']
},
{
show: false
},
{
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)' //y轴线颜色
}
},
data: []
}
],
series: [
{
name: '有颜色的条纹',
type: 'pictorialBar',
stack: 'b',
yAxisIndex: 0,
symbolBoundingData: 100,
// symbol: 'image://' + require('@/img/123.png'),
symbol:'image://data:image/png;base64,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',
symbolSize: ['100%', '100%'],
symbolClip: true,
data: [50, 66, 33, 25, 30],
barWidth: 9,
z: 2
},
{
name: '底色条纹',
type: 'pictorialBar',
yAxisIndex: 2,
barGap: '-100%',
data: [100, 100, 100, 100, 100],
barWidth: 9,
symbolBoundingData: 100,
// symbol: 'image://' + require('@/img/456.png'),
symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPIAAAASCAMAAABW8nMUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAXVBMVEX///8niesojOspjO8zmeYkiukkktsojetVqv8pi+4liewoj+crleoggN8uku0ohuQjl+golPIuie0ji+gojugliuosj+xVVf8rgP8cjv8skuklj+owj+8pj+v///9lmoo5AAAAHnRSTlMADTMfCiMHJgMsKSAMEBwTFhMcFi0wKQMGCSMwEBk5u+cGAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+UMCQAsEBYj+dAAAAEtSURBVFjD1ZfbEkMwFEVTWqqlF3ql/v83S8V0C0dOGqPhacmclzhr9mxC1M/Kax7fktcDvFE4GODQkreSI+AdwdHnxmIvX2NDTio+aPhY8YnB5wk4Bc4ITpsrX+ADaPjKYK/mm+T7CIeSH5bcruBZcQ7nOZzjzDT+qi4HGrZ1ueXaWVF8V0O6DDNMl3X+zumy6uxLMnpdKufIE7k85m/Ltv4io79DXqsum3vtgstUFnec9YALgn/P4mTGLM6E3mt/xGWcWajLQ17jyiiv457XLviLWczqFbgyymWccbdXcFxOlZVRLuOMg70i1/CYsxxeqMuUs9R512vK5RJcm7NXUL2YymLT6uh4FnN6xTRe/7NXdDqGZHYWc9i9LOa4TGWxmddOuMzpyKa/9H2v31KKOYGplITSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTEyLTA4VDE2OjQ0OjE2KzA4OjAwl2JQ0gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0xMi0wOFQxNjo0NDoxNiswODowMOY/6G4AAAAgdEVYdHNvZnR3YXJlAGh0dHBzOi8vaW1hZ2VtYWdpY2sub3JnvM8dnQAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABd0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMTj6F3NoAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADI0MmRE4RwAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTYzODk1MzA1NtYhFsEAAAARdEVYdFRodW1iOjpTaXplADk4OUJCediPFQAAAEZ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2FwcC90bXAvaW1hZ2VsYy9pbWd2aWV3Ml85XzE2Mzg4NDgwMjU2ODc3NTg5XzcxX1swXXkUkZkAAAAASUVORK5CYII=',
symbolSize: ['100%', '100%'],
label: {
normal: {
show: true,
position: 'right',
distance: 10,
fontSize: '10',
fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
fontWeight: '400',
color: '#fff',
formatter: function (data) {
return ['6,725,371,345', 66, 33, 25, 30][data.dataIndex] + 's';
}
}
},
// itemStyle: {
// normal: {
// color: '#DDDDDD',
// barBorderRadius: [100, 100, 100, 100]
// }
// },
z: 0
}
]
};