/* 数据 */ let xData = ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月", "9月", "10月", "11月", "12月"]; let barData1 = [45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45]; // 柱子信息1,外层 let barData2 = [15, 20, 30, 20, 30, 15, 20, 30, 20, 30, 20, 30]; // 柱子信息2,内层下 /* 数据整合 */ let barDataList = [barData1, barData2]; // 合并数组，方便使用 let legendData = ["总批次", "检测批次"]; // legend /* series整理 */ let seriesData = []; let colorList = ["transparent", "#FE6369"]; let legendShowList = []; legendData.map((item, index) => { if (index === 0) { seriesData.push({ name: item, type: "bar", yAxisIndex: 0, barWidth: 24, barGap: "-96%", z: 1, itemStyle: { normal: { color: colorList[index], borderColor: '#FE6369', label: { show: true, position: "top", color:"#fff" }, } }, data: barDataList[index], }) legendShowList.push({ name: item, itemStyle: { color: colorList[index], borderColor: '#FE6369', borderWidth: 2, } }) } else { seriesData.push({ name: item, type: "bar", yAxisIndex: 0, barWidth: 20, barGap: "-92%", stack: "a", z: 1, itemStyle: { normal: { color: colorList[index], label: { show: true, position: "insideTop", color:"#fff" }, } }, data: barDataList[index], }) legendShowList.push({ name: item, }) } }) option = { backgroundColor: '#033766', tooltip: { trigger: 'item', axisPointer: { type: 'none' }, position: function (point, params, dom, rect, size) { // 提示框位置 let x = 0; let y = 0; // 提示框位置 if (point[0] + size.contentSize[0] < size.viewSize[0]) { x = point[0] } else if (point[0] > size.contentSize[0]) { x = point[0] - size.contentSize[0] } else { x = "30%" } if (point[1] > size.contentSize[1]) { y = point[1] - size.contentSize[1] } else if (point[1] + size.contentSize[1] < size.viewSize[1]) { y = point[1] } else { y = "30%" } return [x, y]; }, formatter: params => { console.log(params) let childDiv = "

" legendData.map((item, index) => { childDiv += `

${item}:${barDataList[index][params['dataIndex']]}

` }) return `

${params.name}年

${childDiv} ` }, extraCssText: 'opacity: 0.8;background-color:#050F1B;padding: 12px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;' }, legend: { top: 20, itemWidth: 14, itemHeight: 14, itemGap: 25, icon: 'rect', textStyle: { color: '#fff', fontFamily: 'Source Han Sans CN-Regular', fontSize: 14, padding: [0, 0, 0, 5], }, data: legendShowList }, grid: { top: "15%", left: "5%", right: "5%", bottom: "3%", containLabel: true, }, xAxis: [{ type: "category", data: xData, axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { color: "#fff", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, }], yAxis: [{ type: "value", name: "单位：批次", splitNumber: 5, nameTextStyle: { color: '#ffffff', fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', padding: [0, 0, 10, 20] }, axisLabel: { color: "#ffffff", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, axisLine: { show: false }, splitLine: { show: true, lineStyle: { color: "#015B89", width: 1 } }, axisTick: { show: false, }, }], series: seriesData, };

Echarts在线免费图表