let Ydata = ['1', '2', '3', '4', '5', '6', '7'];
let Xdata = [15, 19, 9, 12, 23, 18, 12]
option = {
backgroundColor: '#333333',
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
max: 25,
show: true,
// 不显示轴线
axisLine: {
show: true
},
// 不显示刻度线
axisTick: {
show: false,
},
splitLine: {// 网格线为虚线
show: false,
},
axisLabel: {
interval: 0,
color: 'rgba(255, 255, 255, 1)',
fontSize: 14
},
},
yAxis: {
type: 'category',
inverse: true,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
interval: 0,
color: 'rgba(255, 255, 255, 1)',
fontSize: 14
},
data: Ydata,
},
series: [
{
type: "pictorialBar",
//本地引用
// symbol:
// "image://" + require("../../../assets/image/home/chartsIcon.png"),
symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAo5JREFUSEu9ls9PU0EQxz/zeBawlAKxgBFjUONJE05ejVdD4o/ePREvHpRI/Bs8SNCDF6MX7w2aEK+GqycSb0YlRgxQDAgFCq+vb82UfWVbKaix3WSz6XSzn535zsw+oQVDWsDgSIgxRvd4UNkbT72bcWYkIvr7wNEQYoyJD/aBNiBe1a4jAspA6KxGRNReM36D2JurXQ8+BrQ7M2HteogCAmDXmSVrV1jVs4MgelO9tR54HEgCXXbtsP8pRD3YAbaATbtuW3DoelQDsSFSD/T2enA30Dtb5OyT1TA7H0SXNyMGlZD0WDqb8N7f7/NzVzr5AqwBGxao3pVjUD3EBfQAmYcr4eh0wdwLjek8SFVfpJhNydNHGX8GWAF+xiAR0ZDuZ5fVIg6RAgYm8uGtXCGacPc1SCBzI8nk1GAiByxbUCV0qk3VE2NM7IWGKDNb5OLYYullIw/qYerR8wFv7Gqy7YP1SEO3q964EBVbhe4FTt5cCCfmdqNsfJjBsNO7QtCt0YDERg8daxnEKbWRdi83PeQ/BhatRtsiEroQTVcV+wRwamQ+eLUecTqGFPuWq4DYpqDO1YGqU2mPb3PDidvAd+CHaiMiJReieqQ0VMDQ+c/B2/JenVTG+pmPUF/URkh/vVCFtEHp07nENWDBhqwgIkHLIS0J19HC9+UJUut7whfSdKz2/7XwNSn8bqt86c5y9OJ/p7DqU1OM4/kw+7oQPfijYkx5k1P9/uHFqCFwClJTWeslM54Pr89smruHtZXRLnk21e+/sRmlPUwbZqUQa9qKhWgHdvtX2jbI4foG2eWxNLzfIOdt8algFUDDBumAmtfqLSR+Ypv3aFV7VTOf3/ru2tQPiQbvxj+ZfwEdmGspkE58uAAAAABJRU5ErkJggg==",
symbolSize: [30, 30],
symbolOffset: [0, 0],
symbolPosition: "right",
z: 12,
itemStyle: {
normal: {
color: "#fff"
}
},
data: (function () {
var list = [];
for (var i = 0; i < Xdata.length; i++) {
list.push(2 * Xdata[i]);
}
return list;
})()
},
{
type: 'bar',
barWidth: 12,
zlevel: 2,
barGap: '-100%',
itemStyle: {
normal: {
borderRadius: [0, 6, 6, 0],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(61, 131, 255, 0)'
}, {
offset: 1, color: 'rgba(72, 240, 255, 1)'
}]
}
},
},
// label: {
// show: true,
// formatter: '',
// backgroundColor: '#fff',
// width: 14,
// height: 14,
// position: 'right',
// offset: [-12, 0],
// borderWidth: 5,
// borderColor: 'rgba(255,255,255,0.2)',
// borderRadius: 8,
// shadowColor: '#fff',
// shadowBlur: 20
// },
label: {
show: true,
position: [700, -25],
fontSize: 14,
color: "#fff",
formatter: function (data) {
return '{a|' + data.value + '}' + " ml"
// "{a|" + returnStr + "}"
},
rich: {
a: {
color: '#fff',
textBorderWidth: 1,
fontSize: 22
}
},
},
data: Xdata,
},
{
type: 'bar',
barWidth: 12,
itemStyle: {
normal: {
color: 'rgba(60, 102, 118, 0.34)',
},
},
data: [25, 25, 25, 25, 25, 25, 25],
},
],
};