let information = { area: [ "08点", "09点", "10点", "11点", "12点", "13点", "14点", "15点", "16点", "17点", "18点", "19点", "20点", ], legend: [ "保障服务管理1科", "保障服务管理2科", "保障服务管理3科", "保障服务管理4科", "保障服务管理5科", "解放东路8号集中办公点", ], data: [ [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500, 100, 50, 100, 200], [320, 302, 301, 334, 390, 330, 320, 100, 50, 100, 50, 100, 200], [320, 302, 301, 334, 390, 330, 320, 100, 50, 100, 50, 100, 200], [320, 302, 301, 334, 390, 330, 320, 100, 50, 100, 50, 100, 200], [320, 302, 301, 334, 390, 330, 320, 100, 50, 100, 50, 100, 200], [320, 302, 301, 334, 390, 330, 320, 100, 50, 100, 50, 100, 200], ], colors: ["#1165b2", "#b17706", "#af3b14", "#502092", "#398912", "#0d8888"], }; const option = { backgroundColor:"#021032", color: information.colors, legend: { top: 50, right: 50, width: 600, // 控制legend的总宽度 itemWidth: 16, itemHeight: 16, icon: "rect", textStyle: { //图例文字的样式 color: "#b4e4ff", fontSize: 20, // 给出高度和rich对象，实现图标与文字居中对齐 height: 16, rich: { a: { verticalAlign: "middle", }, }, }, data: information.legend, }, tooltip: { trigger: "axis", backgroundColor: "rgba(9,40,84,0.8)", borderColor: "rgba(9,40,84,0.8)", textStyle: { fontSize: 20, color: "#fff", }, formatter: function (params) { // 加x轴名称 var res = params[0].name + "

"; for (var i = 0, l = params.length; i < l; i++) { // 创建 marker 标签 var color = params[i].color; // 获取系列颜色 res += "

"; res += params[i].seriesName + "

" + "" + params[i].value + "

"; } res += "

"; return res; }, }, grid: { left: "3%", right: "3%", bottom: "8%", top: "34%", containLabel: true, }, xAxis: { type: "category", axisLabel: { color: "#b4e4ff", fontSize: 20, margin: 20, }, axisLine: { lineStyle: { color: "rgba(180, 228, 255, 0.3)", width: 2, }, }, axisTick: { show: false, }, splitLine: { show: true, interval: information.area.length, lineStyle: { color: "rgba(180, 228, 255, 0.1)", width: 1, }, }, data: information.area, }, yAxis: { name: "单位：kWh", nameLocation: "end", nameTextStyle: { color: "#b4e4ff", fontSize: 20, padding: [0, 0, 0, 110], }, type: "value", axisLabel: { color: "#b4e4ff", fontSize: 20, }, axisLine: { show: true, lineStyle: { color: "rgba(180, 228, 255, 0.3)", width: 2, }, }, axisTick: { show: false, }, splitLine: { show: false, }, splitArea: { show: true, areaStyle: { color: ["rgba(255,255,255,0)", "rgba(18, 63, 115, 0.3)"], }, }, splitLine: { show: true, lineStyle: { color: "rgba(180, 228, 255, 0.1)", }, }, }, series: [], }; for (var i = 0; i < information.legend.length; i++) { option.series.push({ name: information.legend[i], type: "bar", stack: "总用电", barWidth: "25%", label: { show: false, position: "insideRight", }, data: information.data[i], }); }

多列叠加柱状图