echarts 自定义 睡眠

import * as echarts from “echarts.min”
mounted() {
this.$refs.chart.init(echarts, chart => {
const colorList = [
‘#FFD157’,
‘#C9C7F3’,
‘#605BD0’,
];
let dataSet = [
[12, 2],
[38, 3],
[4, 2],
[58, 3],
[38, 2],
[46, 3],
[20, 1],
[32, 2],
[98, 3],
[12, 2],
[4, 1],
[20, 2],
[50, 3],
[50, 2],
[8, 1],
[68, 2],
]
let dataTemp = []
let dataNums = []
dataSet.map(function (item, index) {
let arr = []
if (index === 0) {
arr[0] = 0
arr[1] = item[0]
} else {
arr[0] = dataNums[index - 1][1]
arr[1] = dataNums[index - 1][1] + item[0]
}
arr[2] = 20
arr[3] = item[1]
// 数据数组
dataNums.push(arr)
let obj = {
value: arr,
itemStyle: {
color: colorList[item[1] - 1]
}
};
// 样式数组
dataTemp.push(obj)
// 最后一项
if (index === dataSet.length - 1) {
dataNums.push([dataSet[index - 1][0], dataSet[index - 1][0], 60])
dataTemp.push({
value: [dataSet[index - 1][0], dataSet[index - 1][0], 60],
itemStyle: {
color: ‘transparent’
}
})
}
});
let option = {
xAxis: {
show: false,
scale: true
},
yAxis: {
show: false,
},
series: [
{
type: ‘custom’,
renderItem: function (params, api) {
var yValue = api.value(2);
var start = api.coord([api.value(0), yValue]);
var size = api.size([api.value(1) - api.value(0), yValue]);
var style = api.style();
// 位置
if (api.value(3) === 1) {
start[1] = start[1] * 0.5
style.fill = colorList[0]
}
if (api.value(3) === 2) {
start[1] = start[1] * 0.75
style.fill = colorList[1]
}
if (api.value(3) === 3) {
start[1] = start[1]
style.fill = colorList[2]
}
return {
type: ‘rect’,
shape: {
x: start[0],
y: start[1],
width: size[0],
height: size[1]
},
style: style
};
},
encode: {
x: [0, 1],
y: 2,
tooltip: [0, 1, 2],
itemName: 3
},
data: dataNums
}
]
};
chart.setOption(option);
})
},