echarts柱状图显示总数

文章索引

HTML

<div id="main"></div>

1	<div id="main"></div>

CSS

#main {
	width: 100%;
	height: 500px;
}

#main {

width: 100%;

height: 500px;

}

JS

// 初始化图表实例
var myChart = echarts.init(document.getElementById("main"));
var xAxisData = [];
var data1 = new Array(3).fill(3);
var data2 = new Array(3).fill(4);
var totalData = [];

for (var i = 0; i < data1.length; i++) {
	xAxisData.push("class" + i);
	totalData.push(data1[i] + data2[i]);
}

var option = {
	legend: {
		data: ["bar1", "bar2"],
		left: "center",
		bottom: 0
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow"
		}
	},
	xAxis: {
		data: xAxisData,
		name: "X Axis"
	},
	yAxis: {},
	grid: {
		bottom: "10%",
		right: "10%",
		left: "10%"
	},
	series: [
		{
			name: "bar1",
			type: "bar",
			stack: "total",
			barWidth: "20%",
			label: {
				show: true
			},
			data: data1
		},
		{
			name: "bar2",
			type: "bar",
			stack: "total",
			barWidth: "20%",
			label: {
				show: true
			},
			data: data2
		},
		{
			name: "总数",
			type: "bar",
			barWidth: "20%",
			barGap: "-100%", // 左移100%，stack不再与上面两个在一列
			label: {
				normal: {
					show: true,
					position: "top", //  位置设为top
					formatter: "{c}",
					textStyle: { color: "#000" },
					formatter: (params) => {
						return data1[params.dataIndex] + data2[params.dataIndex];
					}
				}
			},
			itemStyle: {
				normal: {
					color: "rgba(128, 128, 128, 0.1)" // 仍为透明
				}
			},
			data: totalData
		}
	]
};

// 使用配置项生成图表
myChart.setOption(option);

window.addEventListener("resize", function () {
	myChart.resize();
});

// 初始化图表实例

var myChart = echarts.init(document.getElementById("main"));

var xAxisData = [];

var data1 = new Array(3).fill(3);

var data2 = new Array(3).fill(4);

var totalData = [];

for (var i = 0; i < data1.length; i++) {

xAxisData.push("class" + i);

totalData.push(data1[i] + data2[i]);

}

var option = {

legend: {

data: ["bar1", "bar2"],

left: "center",

bottom: 0

tooltip: {

trigger: "axis",

axisPointer: {

type: "shadow"

}

xAxis: {

data: xAxisData,

yAxis: {},

grid: {

bottom: "10%",

right: "10%",

left: "10%"

series: [

{

type: "bar",

stack: "total",

barWidth: "20%",

label: {

show: true

data: data1

{

type: "bar",

stack: "total",

barWidth: "20%",

label: {

show: true

data: data2

{

type: "bar",

barWidth: "20%",

barGap: "-100%", // 左移100%，stack不再与上面两个在一列

label: {

normal: {

show: true,

position: "top", // 位置设为top

formatter: "{c}",

textStyle: { color: "#000" },

formatter: (params) => {

return data1[params.dataIndex] + data2[params.dataIndex];

}

itemStyle: {

normal: {

color: "rgba(128, 128, 128, 0.1)" // 仍为透明

}

data: totalData

}

]

};

// 使用配置项生成图表

myChart.setOption(option);

window.addEventListener("resize", function () {

myChart.resize();

});

北鱼IT

echarts柱状图显示总数

HTML

CSS

JS

示例体验

Codepen