echarts堆叠柱状图

写这个图遇到左下方的标注和底部数据，对比图形展示的占比不一样 关键点

在于series的 012排序的index，从视图上来讲，是从下往上

colorMap

const colorMap = {
        '筹资活动现金流出占比': '#F2BA02',
        '经营活动现金流出占比': '#4874CB',
        '投资活动现金流出占比': '#EE822F',
        // 这里也是同理
};

关键点2

    var colors = ['#4874CB','#FA6400','#F2BA02','#75BD42'];
    colors 012排序的index，从视图上来讲，是从下往上 
    
    legend: {
           data: ['财务费用占比','研发费用占比','管理费用占比','销售费用占比'],
    },
    只有这个legend 起一个正常排序

function nine1(response) {
	var eCList = response;
	var formattedData = eCList.tb9.map(item => {
		return {
			"time": item.time, //时间
			"cwfy_zb": (item.cwfy_zb*100).toFixed(2), //财务费用占比 + '%'
			"yffy_zb": (item.yffy_zb*100).toFixed(2), //管理费用占比 + '%'
			"glfy_zb": (item.glfy_zb*100).toFixed(2), //销售费用占比 + '%'
			"xsfy_zb": (item.xsfy_zb*100).toFixed(2), //销售费用占比 + '%'
		};
	}).slice(-10);
	var chartDom = document.getElementById('main_nine1');
	var myChart = echarts.init(chartDom);
	var colors = ['#4874CB','#FA6400','#F2BA02','#75BD42'];
	var option = {
		title: {
			text: '费用占营收比率'
		},

		color: colors,
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		toolbox: {
			feature: {
				saveAsImage: {
					show: false
				}, //控制保存按钮显示隐藏
			}
		},
		legend: {
			data: ['财务费用占比','研发费用占比','管理费用占比','销售费用占比'],
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				show: true,
				onZero: false, //轴线是否在0刻度轴上 设置负数
			},
			axisTick: { // 这是控制x轴标签的显示的配置
				show: false, // 设置为false来隐藏x轴标签
			},
			axisLabel: { // 这是控制x轴标签的显示的配置
				show: false, // 设置为false来隐藏x轴标签
			},
			data: formattedData.map(item => item.time),
		}],
		yAxis: [{
			type: 'value',
			position: 'left', // 左侧y轴
			axisLabel: {
				// show: false // 不显示坐标轴上的文字
				formatter: '{value} %'
			},
			axisLine: {
				show: true, //显示Y轴网格线
			},
			axisTick: { // 这是控制x轴标签的显示的配置
				show: true, // 设置为false来隐藏x轴标签
			},
		}, ],
		series: [
			{
				name: '销售费用占比',
				type: 'bar',
				stack: '总量',
				yAxisIndex: 0,
				data: formattedData.map(item => item.xsfy_zb),
			},
			{
				name: '管理费用占比',
				type: 'bar',
				stack: '总量',
				yAxisIndex: 0,
				data: formattedData.map(item => item.glfy_zb),
			},
			{
				name: '研发费用占比',
				barWidth: '50%',
				type: 'bar',
				stack: '总量',
				yAxisIndex: 0,
				data: formattedData.map(item => item.yffy_zb),
			},{
				name: '财务费用占比',
				barWidth: '50%',
				type: 'bar',
				stack: '总量',
				yAxisIndex: 0,
				data: formattedData.map(item => item.cwfy_zb),
			},
		]
	};
	myChart.setOption(option);
	
	// var table = document.createElement('table');
	var table = document.getElementById('myTable_nine1');
	for (var i = 0; i < 5; i++) {
		var row = document.createElement('tr');
		for (var j = 0; j < (formattedData.length > 10?10:formattedData.length); j++) {
			var cell = document.createElement('td');
			if (i === 0) {
				cell.textContent = formattedData[j].time ? formattedData[j].time : '';
			} else if (i === 1) {
				// cell.textContent = formattedData[j].yysr = 0 ? '' : formattedData[j].yysr;
				cell.textContent = formattedData[j].cwfy_zb === 0 ? '' : formattedData[j].cwfy_zb+'%';
			} else if (i === 2) {
				cell.textContent = formattedData[j].yffy_zb === 0 ? '' : formattedData[j].yffy_zb+'%';
			} else if (i === 3) {
				cell.textContent = formattedData[j].glfy_zb === 0 ? '' : formattedData[j].glfy_zb+'%';
			} else if (i === 4) {
				cell.textContent = formattedData[j].xsfy_zb === 0 ? '' : formattedData[j].xsfy_zb+'%';
			}
			row.appendChild(cell);
		}
		table.appendChild(row);
	}
	document.querySelector('.content_box_nine1').appendChild(table);
	// y轴--计算
	var result = [];
	formattedData.forEach(item => {
		for (var key in item) {
			if (key !== 'time') {
				if (!result[key]) {
					result[key] = {
						min: parseFloat(item[key]),
						max: parseFloat(item[key])
					};
				} else {
					if (parseFloat(item[key]) < result[key].min) {
						result[key].min = parseFloat(item[key]);
					}
					if (parseFloat(item[key]) > result[key].max) {
						result[key].max = parseFloat(item[key]);
					}
				}
			}
		}
	});
	
	// 遍历数据结构
	// 提取所有值并转换为数组
	var values = Object.values(result).flatMap(obj => Object.values(obj));
	// 计算最小值和最大值
	var maxValue = Math.max(...values);
	var minValue = Math.min(...values);

	
	var lMax = maxValue
	var lMin = minValue
	lMax = Math.ceil(Math.ceil(lMax*(lMax>0?150:50))/100); //小数点向上取整
	lMin = Math.floor(Math.floor(lMin*(lMin>0?50:150))/100);
	lMin = lMin < 10 && lMin > 0?0:lMin; //小数点向下取整
	var splitNumber = 10
	var lInterval = (lMax - lMin) / splitNumber
	// 		// ECharts -- setOption
	option.yAxis.max = lMax;
	option.yAxis.min = lMin;
	option.yAxis.interval = lInterval;
	option.yAxis.splitNumber = splitNumber;
	myChart.setOption(option) //设置完上面属性需要再调用set
}