直接上代码
const color = {
"计划": "rgba(30, 169, 237, 1)",
"累计": "#cb7f20"
};
const showColor = {
"计划": "rgba(5, 75, 170, 0)",
"累计": "rgba(203, 128, 32, 0)"
};
const banColor = {
"计划": "rgba(5, 75, 170, 1)",
"累计": "rgba(206, 100, 32, 1)"
};
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: "8%",
top: "18%",
right: "8%",
bottom: "12%",
containLabel: true
},
xAxis: {
type: "category",
triggerEvent: true,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: "14",
interval: 0
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: "#0C4F81",
type: "solid"
}
},
data: ["计划", "累计"]
},
yAxis: {
type: "value",
nameTextStyle: {
color: "#4F88BD",
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: "Microsoft YaHei"
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
name: "城燃卸车量",
type: "bar",
data: ["", Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
label: {
show: true,
color: "#fff",
position: "top",
align: "left",
formatter: "{c}%",
valueAnimation: true
}
},
{
z: 2,
name: "超期",
type: "pictorialBar",
symbolPosition: "end",
data: [100, Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
symbol: "diamond",
symbolOffset: ["0%", "-42%"], // 盖子的位置
symbolSize: [19, 15], // 盖子的大小
itemStyle: {
color: (params) => {
const topColor = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: color[params.name] },
{ offset: 1, color: banColor[params.name] }
]
}; // 上方菱形颜色设置
return topColor;
}
},
tooltip: {
show: false
}
},
{
z: 1,
type: "bar",
name: "超期",
barWidth: 18,
barGap: "50%",
data: [100, Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
itemStyle: {
color: (params) => new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: showColor[params.name] },
{ offset: 0.8, color: color[params.name] }
])
}
}
]
};
效果图如下
3D立体柱状图只要在颜色的部分将渐变改为以下样式
color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
};
效果图如下不同柱子不同颜色可以自己配置
值得注意的是3D效果跟渐变效果好像无法同时存在,至少我在开发过程中还没突破如何让3D效果跟阴影同时存在,因为渐变用的是函数new echarts.graphic.LinearGradient而3D效果需要将color变量赋值为上面这个,我将二者融合使用发现直接不生效了,不清楚为什么,有没有大神在评论区给解答一下,谢谢大佬。