效果图
不想写太多 过不了审核 下面代码
// num num1 num2 在全局定义 let num = 0
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
// formatter(params) {
// console.log("params---", params); //我们可以打印该值
// }
},
legend: {
textStyle: {
color: "rgba(169, 217, 255, 1)"
}
},
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
show: false
},
yAxis: {
type: "category",
data: ["社区1", "社区2", "社区3", "社区4", "社区5"],
name: "单位/件",
nameTextStyle: {
color: "rgba(169, 217, 255, 1)"
},
axisTick: {
show: false
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "rgba(169, 217, 255, 1)" //Y轴内容文字颜色
}
},
axisLine: {
lineStyle: {
color: "rgba(56, 80, 148, 1)"
}
}
},
series: [
{
name: "疑似聚众",
type: "bar",
stack: "total",
barWidth: 20, //柱图宽度
// label: {
// show: true
// },
emphasis: {
focus: "series"
},
data: [320, 302, 301, 334, 390],
itemStyle: {
normal: {
label: {
show: true, //开启显示
formatter(params) {
// 处理数值显示格式
num1 = params.data;
console.log("num1", num);
return num;
},
position: "right", //在右侧显示
textStyle: {
//数值样式
color: "rgba(186, 211, 255, 0)",
fontSize: 12
}
},
//自定义颜色
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "rgba(0, 120, 233, 0.4300)" //指0%处的颜色
},
{
offset: 1,
color: "rgba(8, 201, 255, 1)" //指100%处的颜色
}
],
false
)
}
}
},
{
name: "昼伏夜出",
type: "bar",
stack: "total",
// label: {
// show: true
// },
emphasis: {
focus: "series"
},
data: [120, 132, 101, 134, 90],
itemStyle: {
//自定义颜色
normal: {
label: {
show: true, //开启显示
formatter(params) {
// 处理数值显示格式
num2 = params.data;
console.log("num2", num);
return num;
},
position: "right", //在右侧显示
textStyle: {
//数值样式
color: "rgba(186, 211, 255, 0)",
fontSize: 12
}
},
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "rgba(99, 8, 255, 1)" //指0%处的颜色
},
{
offset: 1,
color: "rgba(39, 0, 233, 0.4300)" //指100%处的颜色
}
],
false
)
}
}
},
{
name: "人脸报警",
type: "bar",
stack: "total",
// label: {
// show: true
// },
emphasis: {
focus: "series"
},
data: [220, 182, 191, 234, 290],
itemStyle: {
//自定义颜色
normal: {
label: {
show: true, //开启显示
formatter(params) {
// 处理数值显示格式
num = num1 + num2 + params.data;
console.log("num3", num);
return num;
},
position: "right", //在右侧显示
textStyle: {
//数值样式
color: "rgba(186, 211, 255, 1)",
fontSize: 12
}
},
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "rgba(0, 221, 233, 0.4300)" //指0%处的颜色
},
{
offset: 1,
color: "rgba(8, 255, 213, 1)" //指100%处的颜色
}
],
false
)
}
}
}
]
};
echarts堆叠柱状图 涉及渐变,轴线及文字颜色,legend颜色,数值在顶部显示,横向柱状图,横向顶部显示堆叠柱状图的数值和及颜色等