echarts堆叠面积图排序

数据为测试数据，有一样的可以作为参考

参考了官方的堆叠图，网上找方法。最后还是没有找到相似的，或者有相似但是不符合需求。

最后参考官方文档  https://echarts.apache.org/examples/zh/editor.html?c=dataset-simple0

1.将 xAxis yAxis 这两个互换 ，柱形图横着展示

2.series 中每条数据添加 stack: 'name' 属性，实现堆叠，特别注意的是stack的name要相同才会堆叠到一起

效果图如下：

数据解析：

 第一条数据是上方的图例，后面的数据是每个堆叠柱形图。

排序问题

计算第二条数据的合，代码如下：

//排序
for (var i = 1; i < sources.length - 1; i++) {
    for (var j = 1; j < sources.length - 1; j++) {
        var array1 = sources[j];
        var array2 = sources[j + 1];
        var sum1 = 0;
        var sum2 = 0;
        for (var i = 1; i < array1.length - 1; i++) {
            sum1 += array1[i];
        }
        for (var i = 1; i < array2.length - 1; i++) {
            sum2 += array2[i];
        }
        if (sum1 > sum2) {
            var tempsums = sources[j + 1];
            sources[j + 1] = sources[j];
            sources[j] = tempsums;
        }
    }
}

一个简单的冒泡排序。

 1.y轴名称放到柱形图上方

 2.添加图片

1：在 option 下的 axisLabel 中添加

show: true,
inside: true,
splitNumber: 50,
boundaryGap: [20, 20],
textStyle: {
    color: "#fff",
    verticalAlign: "bottom",
    align: "left",
    padding: [10, 0, 20, -10],
},

 调整padding来调整位置

2：使用图片 ， 也是 option 下的 axisLabel 中添加

formatter: function(name) {
    var arr = [];
    arr.push(
        '{name|' + name + '}',
        '{img|}'
    );
    return arr.join('');
},

// margin: 20,
rich: {
    name: {
        Height: 10,
        width: 370,
        padding: [10, 0, 10, 0],
        align: 'left',
        backgroundColor: {
            image: images
        }
    },
    img: {
        height: 0,
        align: 'center',
    },
},

先在 formatter 将 name 和 img 进行 return，就可以在 rich 中进行样式设置

其中 backgroundColor 使用的是 image，直接放图片地址

完整 option 如下：

                var option;
				var images = "./img/xz11372.png";
				option = {
					legend: {
						itemWidth: 10, // 设置宽度
						itemHeight: 10, // 设置高度
						itemGap: 5, // 设置间距
						//	padding:[10,0,0,24],
						textStyle: {
							color: '#FFF', // 文字的颜色
							fontSize: '14', // 文字字体大小
						},
					},
					grid: {
						x: "2%", //x 偏移量
						y: "8%", // y 偏移量
						width: "60%", // 宽度
						height: "90%" // 高度
					},
					dataset: {
						source: sources
					},
					xAxis: {
						type: "value",
						boundaryGap: false,
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false, //不显示坐标轴上的文字
						},
					},
					yAxis: [{
							type: 'category',
							textStyle: {
								color: '#FFF', // 文字的颜色
								fontSize: '14', // 文字字体大小
							},
							axisTick: {
								show: false //不显示坐标轴刻度线
							},
							axisLine: {
								show: false, //不显示坐标轴线
							},
							axisLabel: {
								formatter: function(name) {
									var arr = [];
									arr.push(
										'{name|' + name + '}',
										'{img|}'
									);

									return arr.join('');
								},

								// margin: 20,
								rich: {
									name: {
										Height: 10,
										width: 370,
										padding: [10, 0, 10, 0],
										align: 'left',
										backgroundColor: {
											image: images
										}
									},
									img: {
										height: 0,
										align: 'center',

									},
								},
								show: true,
								inside: true,
								splitNumber: 50,
								boundaryGap: [20, 20],
								textStyle: {
									color: "#fff",
									verticalAlign: "bottom",
									align: "left",
									padding: [10, 0, 20, -10],
								},
							},
						},
						{
							type: 'category',
							axisTick: {
								show: false //不显示坐标轴刻度线
							},
							axisLine: {
								show: false, //不显示坐标轴线
							},
							data: sums.reverse(),
							axisLabel: {
								label: {
									show: false
								},
								formatter: '{value}',
								textStyle: {
									color: "#ffffff",
									verticalAlign: "bottom",
									align: "center",
									padding: [10, 20, 30, 0],
								},
							}
						}
					],

					series: series,

				};
				option && myChart.setOption(option, true);

				myChart.dispatchAction({
					type: 'dataZoom',
					start: 0,
					end: 1
				});

添加最后一段是因为可能会图片加载不出来，点击图例隐藏一个再显示后才会正常显示出图片

最后，因为我主要写java。js就不在各位面前献丑了。