详解如何利用JavaScript绘制堆叠柱状图
作者：Ciao_Traveler
堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。可以形象得展示一个大分类包含的每个小分类的数据，以及各个小分类的占比，显示的是单个项目与整体之间的关系。本文将利用JavaScript实现堆叠柱状图的绘制，需要的可以参考一下
效果图
this.state.workChartList的数据结构
const workChartList = [
{ name: "居民热线", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{ name: "日常调度类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] },
{ name: "调度预警类", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5, 3] },
{ name: "抢维修类", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7] },
{ name: "物质申请类", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{ name: "其他类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 6, 0] },
];
option相关代码 关键是每个serise需要设置同样的stack属性
var colorList = ["#72fbfd", "#56c2f9", "#2e69e9", "#7a23f5", "#8082f7", "#ab4399"];
const xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: "#030e2d",
borderColor: "#030e2d",
textStyle: {
fontSize: "12px",
color: "#96A4F4",
},
},
color: colorList,
legend: {
left: "center",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: "12px",
color: "#96A4F4",
padding: [3, 0, 0, 0],
},
},
grid: {
left: 20,
bottom: 20,
top: 30,
right: 20,
},
xAxis: {
name: "\n\n(月)",
type: "category",
nameTextStyle: {
color: "#7089ba",
fontSize: "10px"
},
nameGap: -9,
axisLabel: {
interval: 0,
textStyle: {
color: "#7089ba",
fontSize: "10px"
},
margin: 6, //刻度标签与轴线之间的距离。
},
axisLine: {
lineStyle: {
color: "#414965",
},
},
axisTick: {
show: false,
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
},
series: [],
};
if (!this.state.workChartList) return;
const seriesItem = this.state.workChartList;
seriesItem.map((item, index) => {
option.series.push({
name: item.name,
type: "bar",
stack: "总数",
barWidth: '50%',
label: {
show: false,
position: "insideRight",
},
data: item.value,
itemStyle: {
normal: {
label: {
show: false, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#fff",
fontSize: "12px",
fontWeight: 100,
},
},
},
},
});
});
this.Chart_init2 = echarts.init(this.Chart_dom2.current);
this.Chart_init2.clear();
this.Chart_init2.setOption(option);
补充
当然JavaScript不仅能绘制堆叠柱状图，还能绘制折柱混合图
效果图：
数据结构
const nrwData = [
{ label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
{ label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
{ label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
{ label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
{ label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
{ label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 },
{ label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
{ label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
{ label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
{ label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
{ label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
{ label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 }
];
具体代码
var xData3 = nrwData?.map((item) => item.label);
const proviceWater = nrwData?.map((item) => item.proviceWater <= 0 ? 0 : item.proviceWater);
const userWater = nrwData?.map((item) => item.userWater <= 0 ? 0 : item.userWater);
const lineData = nrwData?.map((item) => item.nrwRate >= 100 ? 0 : item.nrwRate);
var option = {
tooltip: {
trigger: "axis",
show: true,
backgroundColor: "rgba(16, 34, 79, 0.9)",
borderColor: "#274370",
textStyle: {
color: "#fff",
fontSize: 8,
}
},
legend: {
show: true,
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 10,
color: "#ccc",
},
},
grid: {
left: 30,
bottom: 20,
top: 30,
right: 30,
},
xAxis: {
data: xData3,
name: "\n\n\n(月)",
nameTextStyle: {
color: "#7089ba",
fontSize: "10px"
},
// 坐标轴刻度相关设置
axisTick: {
show: false,
},
nameGap: -9,
// 坐标轴线的相关设置
axisLine: {
show: true,
lineStyle: {
color: "#414965",
},
},
// 坐标轴刻度标签的相关设置
axisLabel: {
// 可以设置成 0 强制显示所有标签
interval: 0,
textStyle: {
color: "#7089ba",
fontSize: "10px"
},
margin: 10, //刻度标签与轴线之间的距离。
},
},
yAxis: [{
type: "value",
name: "单位：万m³",
nameTextStyle: {
color: "#fff",
fontSize: "10px"
},
// 坐标轴在grid区域中的分隔线
splitLine: {
show: false,
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px",
},
},
},
{
type: "value",
name: "产销差（%）",
min: 0,
max: 100,
nameTextStyle: {
color: "#fff",
fontFamily: "PingFangSC-Light",
fontSize: "10px",
},
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px"
}
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
},
],
series: [
{
name: "供水量",
type: "bar",
barWidth: 10,
itemStyle: {
opacity: 0.1,
normal: {
show: true,
color: "#8c3ed8",
barBorderRadius: 0,
borderWidth: 0,
},
},
label: {
show: false,//数据不进行显示
position: "top",
distance: 10,
color: "#fff",
},
tooltip: {
valueFormatter: function (value) {
return value + "万m³";
}
},
data: proviceWater,
},
{
name: "用水量",
type: "bar",
barWidth: 10,
itemStyle: {
opacity: 0.1,
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#1134ac",
},
{
offset: 1,
color: "#4aaaf8",
},
]),
barBorderRadius: 0,
borderWidth: 0,
},
},
label: {
show: false,//数据不进行显示
position: "top",
distance: 10,
color: "#fff",
},
tooltip: {
valueFormatter: function (value) {
return value + "万m³";
}
},
data: userWater,
},
/*折线图*/
{
name: "产销差",
type: "line",
yAxisIndex: 1,
z: 15,
tooltip: {
valueFormatter: function (value) {
return value + "%";
}
},
symbol: "circle",
// symbolSize: 10,
itemStyle: {
normal: {
color: "#84fbfb",
borderColor: "#84fbfb", //拐点边框颜色
lineStyle: {
color: "#84fbfb"//折线的颜色
},
},
},
data: lineData,
}
],
};
以上就是详解如何利用JavaScript绘制堆叠柱状图的详细内容，更多关于JavaScript柱状图的资料请关注脚本之家其它相关文章！