// 隔三位加入逗号 function changeNumberToStr(data) { data = data || '-' let strArr = data.toString().split("."); let letterArr = (strArr[0] || 0).split(""); let result = []; let counter = 0; for (let i = letterArr.length - 1; i >= 0; i--) { counter++; result.unshift(letterArr[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } if (strArr.length > 1) { return result.join('') + "." + strArr[1]; } else { return result.join('') } } // 总数据列表 totalData = [] for (var i = 1; i < 11; i++) { obj = { name: '数据' + i, dataList: [] } for (var j = 1; j < 7; j++) { obj1 = { label: 't' + j, value: 1000 * j } obj.dataList.push(obj1) } totalData.push(obj) } // 颜色列表 colorList = [ "#2166EB", "#9BC3FF", "#F53577", "#B18BC7", "#9BC5BD", "#E3AC4C", "#EE6D58", "#9B41D0", "#4CCBE3", "#726899", ]; series = []; legendData = []; totalNum = []; yNameData = []; totalData.forEach((item, index) => { legendData.push(item.name); if (0 === index) { yNameData = item.dataList.map((x) => x.label); } series.push({ name: item.name, barWidth: 8, type: "bar", stack: "x", data: item.dataList.map((x) => x.value), // 高亮时放大 emphasis: { disabled: true, itemStyle: { color: colorList[index], borderColor: colorList[index], borderWidth: 5, }, }, }); item.dataList.forEach((dataItem) => { idx = yNameData.findIndex( (x) => x === dataItem.label ); if (-1 !== idx) { if (!totalNum[idx]) { totalNum[idx] = 0; } totalNum[idx] += dataItem.value; } }); }); totalNumSum = totalNum.reduce((total, num) => total + num, 0); // 总数 series.push({ type: "bar", zlevel: -1, barWidth: 8, barGap: "-100%", itemStyle: { color: "transparent", }, emphasis: { disabled: true, }, label: { show: true, position: "right", textStyle: { color: "#333", fontSize: 8 }, distance: 10, formatter: (params) => { return `人数: ${changeNumberToStr( params.value )}人占比: ${( (params.value / totalNumSum) * 100 ).toFixed(2)}%`; }, }, data: totalNum, }); option = { color: colorList, backgroundColor: '#fff', legend: { data: legendData, textStyle: { align: "right", }, right: "2%", top: "2%", }, tooltip: { trigger: "item", backgroundColor: "#fff", borderRadius: 5, confine: true, // 是否将tooltip框限制在图表的区域内 extraCssText: "box-shadow: 8px 10px 15px 0px rgba(0, 0, 0, 0.34);padding: 12px;z-index: 2;width: 190px;height: 60px;", textStyle: { color: "#333", fontSize: 10, }, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, position: (point, params, dom, rect, size) => { //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小 x = point[0]; // y = point[1]; boxWidth = size.contentSize[0]; boxHeight = size.contentSize[1]; return [x - boxWidth / 2 - 6, y - boxHeight - 20]; }, formatter: function (params) { return `

Echarts在线免费图表