[HTML] 纯文本查看 复制代码
<!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>
[复制链接]
发表于 2023-4-21 15:57
|
发表于 2023-4-21 15:59
