/* 数据 */ let xData = ["2018", "2019", "2020", "2021", "2022"]; let barData1 = [20, 52, 67, 33, 39]; // 柱子信息1,外层 let barData2 = [15, 20, 30, 20, 30]; // 柱子信息2,内层下 let barData3 = [17, 50, 60, 30, 35]; // 柱子信息3,内层上 /* 容器渲染 */ // EUI.include("vfs/root/echarts/echarts5.js"); // var chartDom = document.getElementById('HHH001'); // echarts容器代号 // var myChart = echarts.init(chartDom); /* 数据整合 */ let stackData = barData3.map((item, index) => { return item - barData2[index] }) let barDataList = [barData1, barData2, stackData]; // 合并数组，方便使用 let legendData = ["招聘岗位", "实际报道人数", "录用人数"]; // legend /* 函数 */ // 数字分割：1653 => 1,653 const formatNum = (value) => { if (!value && value !== 0) return 0; let str = value.toString(); let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; return str.replace(reg, "$1,"); } /* series整理 */ let seriesData = []; let colorList = ["transparent", "#B5D1FE", "#397EF0"]; let legendShowList = []; legendData.map((item, index) => { if (index === 0) { seriesData.push({ name: item, type: "bar", yAxisIndex: 0, barWidth: 19, barGap: "-83%", z: 1, itemStyle: { color: colorList[index], barBorderRadius: [3, 3, 0, 0], borderColor: '#397EF0' }, data: barDataList[index], }) legendShowList.push({ name: item, itemStyle: { color: colorList[index], borderColor: '#397EF0', borderWidth: 1 } }) } else { seriesData.push({ name: item, type: "bar", yAxisIndex: 0, barWidth: 13, barGap: "-83%", stack: "a", z: 1, itemStyle: { color: colorList[index], barBorderRadius: index === legendData.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0], }, data: barDataList[index], }) legendShowList.push({ name: item, }) } }) option = { 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) => { if (index === legendData.length - 1) { childDiv += `

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

` } else { childDiv += `

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

` } }) return `

${params.name}年

${childDiv} ` }, extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;' }, legend: { itemWidth: 10, itemHeight: 10, itemGap: 25, left: 0, textStyle: { color: 'rgba(0, 0, 0, 0.45)', fontFamily: 'Source Han Sans CN-Regular', fontSize: 14, padding: [0, 0, 0, 8], }, data: legendShowList }, grid: { top: "22%", left: "5%", right: "5%", bottom: "3%", containLabel: true, }, xAxis: [{ type: "category", data: xData, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: "rgba(204, 204, 204, 1)", width: 1 }, }, axisLabel: { color: "rgba(0, 0, 0, 0.65)", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, }], yAxis: [{ type: "value", name: "人数：人", splitNumber: 5, nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', align: "left", verticalAlign: "center" }, axisLabel: { color: "rgba(0, 0, 0, 0.65)", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, axisLine: { show: false }, splitLine: { show: true, lineStyle: { color: "rgba(223, 223, 223, 1)", type: "dashed", width: 1 } }, axisTick: { show: false, }, }], series: seriesData, }; //option && myChart.setOption(option);

Echarts在线免费图表