echarts 带背景的二维3D柱状图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ab7fabaa42a37c38e49c5fb5b5746228.jpeg#pic_center)
var abilityuse = document.getElementById("abilityuse_echarts")
var abilityuse_echarts = echarts.init(abilityuse);
var xData = ["04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
var line = ["375", "500", "900", "800", "610", "1001", "350"];
var line_bg = ["1500", "1500", "1500", "1500", "1500", "1500", "1500"]
var abilityuse_option = {
title: {
text: '(万次)',
textStyle: {
fontSize: 12,
color: "#666",
fontWeight: '400'
},
top: 0,
left: "0%",
},
tooltip: {
formatter: function (data) {
let aaa = data.name + ":" + data.value + "万次"
return aaa
}
},
grid: {
left: "4%",
right: '1%',
top: '11%',
bottom: "15%"
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '90.5%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
textStyle: {
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
data: xData,
axisLabel: {
show: true,
textStyle: {
color: '#666',
fontSize: 12
},
margin: 30,
},
axisLine: {
show: false
},
axisTick: {
show: false
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#dfdfdf"
}
}
}],
yAxis: [{
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#dfdfdf',
type: 'solid'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#dfdfdf',
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: '#666'
},
}
}],
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [32, 18],
symbolOffset: [0, 10],
z: 12,
itemStyle: {
'normal': {
color: "#4898FF",
}
},
data: line_bg
},
{
name: '',
type: 'bar',
barWidth: 32,
barGap: '-100%',
itemStyle: {
normal: {
color: "#4898FF",
}
},
showBackground: true,
backgroundStyle: {
color: '#EFF8FA'
},
data: line
},
{
name: "",
type: "pictorialBar",
symbolSize: [32, 18],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
"itemStyle": {
'normal': {
color: '#C2E1F0',
}
},
data: line_bg
},
{
name: "",
type: "pictorialBar",
symbolSize: [32, 18],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
"itemStyle": {
'normal': {
color: '#246FF4',
}
},
data: line
}
]
}
abilityuse_echarts.setOption(abilityuse_option);
window.addEventListener("resize", function () {
abilityuse_echarts.resize()
});