今天写的比较着急,有问题也在所难免,请大家口下留情,谢谢!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #dom { width: 100%; height: 400px; } </style> </head> <body> <div id="dom"></div> </body> <script src="./js/echarts.min.js"></script> <script> (function () { let data = "11111111111111111111111111111111111111133333311111111111111222111111111111111111111333111333311111111111111111133111111111111111111114444444441111222333333333333333333333333333333311122211111111111111111111111111111111133111333333311111133311133333333111333311111113333311113333111111111111111122233222222221111111111111111113333331111111111111111111111111111111111111111111111111111111111111111111111111"; let arr = []; let xAxisData = []; let value = 0; let echartsParams = [{ xIndex: 1, name: '浅睡', y: 250, type: "1", color: { start: '#D540C2', end: '#C430DE' } }, { xIndex: 2, name: '快速眼动', y: 150, type: "2", color: { start: '#FC8977', end: '#F1758D' } }, { xIndex: 0, name: '深睡', y: 350, type: "3", color: { start: '#942DEC', end: '#8937E3' } }, { xIndex: 3, name: '清醒', y: 50, type: "4", color: { start: '#F1C139', end: '#F9B836' } }]; for (let i = 0; i < data.length; i++) { xAxisData.push(i.toString()); value = value + 1; if (data[i] !== data[i + 1]) { let before = { type: i - value <= 0 ? null : data[i - value], xIndex: i - value > 0 ? echartsParams[Number(data[i - value]) - 1].xIndex : null }; let after = { type: i < data.length - 2 ? data[i + 1] : null, xIndex: i < data.length - 2 ? echartsParams[Number(data[i + 1]) - 1].xIndex : null }; let markLineColor = { start: "rgba(0,0,0,0)", end: "rgba(0,0,0,0)" }; if(i < data.length - 2) { let currentIndex = echartsParams[Number(data[i]) - 1].xIndex; let nextIndex = echartsParams[Number(data[i + 1]) - 1].xIndex; markLineColor.start = currentIndex > nextIndex ? echartsParams[Number(data[i]) - 1].color.end : echartsParams[Number(data[i + 1]) - 1].color.end; markLineColor.end = currentIndex > nextIndex ? echartsParams[Number(data[i + 1]) - 1].color.start : echartsParams[Number(data[i]) - 1].color.start } arr.push({ name: echartsParams[Number(data[i]) - 1].name, type: data[i], value: value, valueTotal: i + 1, xIndex: echartsParams[Number(data[i]) - 1].xIndex, markLineY: { start: i === data.length - 1 ? 0 : echartsParams[Number(data[i]) - 1].y, end: i < data.length - 2 ? echartsParams[Number(data[i + 1]) - 1].y : 0 }, color: echartsParams[Number(data[i]) - 1].color, before: before, after: after, markLineColor: markLineColor, barBorderRadius: [ before.xIndex > echartsParams[Number(data[i]) - 1].xIndex ? 0 : 5, after.xIndex > echartsParams[Number(data[i]) - 1].xIndex ? 0 : 5, i === data.length - 1 ? 5 : after.xIndex > echartsParams[Number(data[i]) - 1].xIndex ? 5 : 0, i - value + 1 === 0 ? 5 : before.xIndex > echartsParams[Number(data[i]) - 1].xIndex ? 5 : 0 ] }) value = 0; } } let seriesData = []; arr.map(item => { seriesData.push({ type: 'bar', stack: 'total', barCategoryGap: 40, label: { show: false }, data: [{ name: item.name, value: item.value, itemStyle: { normal: { barBorderRadius: item.barBorderRadius, color: item.type === "3" ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: item.color.start }, { offset: 1, color: item.color.end }]) : "transparent" } } }, { name: item.name, value: item.value, itemStyle: { normal: { barBorderRadius: item.barBorderRadius, color: item.type === "1" ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: item.color.start }, { offset: 1, color: item.color.end }]) : "transparent" } } }, { name: item.name, value: item.value, itemStyle: { normal: { barBorderRadius: item.barBorderRadius, color: item.type === "2" ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: item.color.start }, { offset: 1, color: item.color.end }]) : "transparent" } } }, { name: item.name, value: item.value, itemStyle: { normal: { barBorderRadius: item.barBorderRadius, color: item.type === "4" ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: item.color.start }, { offset: 1, color: item.color.end }]) : "transparent" } } }], markLine: { silent: true, symbol: ['none', 'none'], label: { show: false }, data: [[{ xAxis: item.valueTotal, y: item.markLineY.start, lineStyle: { type: "solid", color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: item.markLineColor.start }, { offset: 1, color: item.markLineColor.end }]), width: 1 } }, { xAxis: item.valueTotal, y: item.markLineY.end, lineStyle: { type: "solid" } }]] } }); }) let myChart = echarts.init(document.getElementById("dom")); let option = { legend: { show: false }, grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: true }, xAxis: { type: 'value', data: xAxisData, min: 1, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, yAxis: { type: 'category', data: ['深睡', '浅睡', '快速眼动', '清醒'], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, series: seriesData }; myChart.setOption(option); })(); </script> </html> |