let myDate = ['樱桃', '麒麟瓜', '阳光玫瑰葡萄', '草莓', '贝贝南瓜', '辣椒', '架豆王'];
let numA = [806, 910, 990, 1062, 805, 1051, 970];
let numB = [6, 6, 6, 6, 6, 6, 6];
let option = {
backgroundColor:'#031528',
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff"
}
},
},
grid: {
borderWidth: 0,
top: '10%',
bottom: '12%',
textStyle: {
color: "#fff"
}
},
calculable: true,
xAxis: [{
type: "category",
axisLine: {
lineStyle: {
color: '#ffffff'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0,
},
axisLine: {
show: false,
lineStyle: {
color: '#ffffff'
}
},
data: myDate,
}],
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1C82C5'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(4, 187, 255, .2)',
type: 'dashed'
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '13px'
}
},
axisTick: {
show: false
}
},
series: [{
name: "",
type: "bar",
stack: "总量",
barMaxWidth: 24,
barGap: "10%",
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#015CC7'
}, {
offset: 1,
color: '#031E3E'
}], false),
barBorderRadius: 0,
label: {
show: true,
position: "top",
color: '#56C1F8',
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
},
},
data: numA,
}, {
name: "",
type: "bar",
stack: "总量",
barMaxWidth: 24,
barGap: "10%",
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0CCCF5'
}, {
offset: 1,
color: '#0CCCF5'
}], false),
barBorderRadius: 0,
},
},
data: numB,
}, {
// 分隔
type: "pictorialBar",
tooltip: {
show: false,
},
symbolRotate: "-45",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#023D75",
},
{
offset: 1,
color: "#023D75",
},
]),
},
},
symbolRepeat: "fixed",
symbolMargin: -8,
symbol: "rect",
symbolClip: true,
symbolSize: [2, 28],
symbolPosition: "start",
symbolOffset: [-1, 10],
data: numA,
z: 66,
animationEasing: "elasticOut",
}, ]
};