echart 堆叠柱形图总数

在使用堆叠柱形图 展示总数于柱形上

vue 使用组件动态设置数据

父组件

methods: {
		MerchantsId(val) {
			// 获取行业分类数据
			getCategory({ codes: val })
				.then((response) => {
					this.topxAxis = [];
					this.topseries = [];
					// 数据处理 视业务需求
					const arr = response.data;
					var arr1 = [];
					var arr2 = [];
					var arr3 = [];
					var arr4 = [];
					var arr5 = [];
					arr.forEach((element) => {
						this.topxAxis.push(element.firstCategoryName);
						arr1.push(element.merchantOperationDto.operationStatusANum);
						arr2.push(element.merchantOperationDto.operationStatusBNum);
						arr3.push(element.merchantOperationDto.operationStatusCNum);
						arr4.push(element.merchantOperationDto.operationStatusDNum);
						arr5.push(
							element.merchantOperationDto.operationStatusANum +
								element.merchantOperationDto.operationStatusBNum +
								element.merchantOperationDto.operationStatusCNum +
								element.merchantOperationDto.operationStatusDNum
						);
						// 子组件数据赋值
						this.topseries = [
							{
								name: element.merchantOperationDto.operationStatusA,
								type: "bar",
								stack: "vistors",
								barWidth: "60%",
								color: ["#92D050"],
								data: arr1,
								animationDuration: 300,
							},
							{
								name: element.merchantOperationDto.operationStatusB,
								type: "bar",
								stack: "vistors",
								barWidth: "60%",
								color: ["#9CC3E6"],
								data: arr2,
								animationDuration: 300,
							},
							{
								name: element.merchantOperationDto.operationStatusC,
								type: "bar",
								stack: "vistors",
								barWidth: "60%",
								color: ["#FFC000"],
								data: arr3,
								animationDuration: 300,
							},
							{
								name: element.merchantOperationDto.operationStatusD,
								type: "bar",
								stack: "vistors",
								barWidth: "60%",
								color: ["#FF0000"],
								data: arr4,
								animationDuration: 300,
							},
							{
								name: "总数",
								type: "bar",
								barWidth: "60%",
								barGap: "-100%",
								color: ["rgba(0, 0, 0, 0)"],
								data: arr5,
								animationDuration: 300,
								label: {
									normal: {
										show: true, //显示数值
										position: "top", //  位置设为top
										formatter: "{c}",
										textStyle: { color: "#000" }, //设置数值颜色
									},
								},
							},
						];
					});
					// 创建柱形图
					this.$nextTick(() => {
						this.$refs.charttop.initChart();
					});
				})
				.catch((response) => {
					console.log("失败", response);
				});
		},
	},

子组件

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from "./mixins/resize";
import { listBusinessCategory } from "@/api/map/businessCategory";
import { getCategory } from "@/api/index/index";

export default {
	props: {
		className: {
			type: String,
			default: "chart",
		},
		width: {
			type: String,
			default: "100%",
		},
		height: {
			type: String,
			default: "300px",
		},
		topseries: {
			type: Array,
			default: [],
		},
		topxAxis: {
			type: Array,
			default: [],
		},
	},
	data() {
		return {
			chart: null,
			Categorylist: [],
		};
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, "macarons");
			this.chart.setOption({
				 title: {
					text: '行业分类',
					left: 'center'
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
					},
				},
				grid: {
					width: "100%",
					top: 30,
					left: "1%",
					bottom: "1%",
					containLabel: true,
				},
				xAxis: [
					{
						type: "category",
						data: this.topxAxis,
						axisTick: {
							alignWithLabel: true,
							show: true,
							interval: 0,
							length: 2,
						},
						axisLabel: {
							interval: 0,
							rotate: 45,
						},
					},
				],
				yAxis: [
					{
						type: "value",
					},
				],
				series: this.topseries
			});
		}
	}
};