let date_timestr = +new Date(); //任务开始的最小值我这里就用的目前时间
date_timestr = +new Date('2022/10/19');
let opacity_Data = [ //隐藏部分的；开始时间的 (几天几小时)
1000 * 60 * 60 * 24 * 2,
1000 * 60 * 60 * 24 * 4,
1000 * 60 * 60 * 24 * 2,
1000 * 60 * 60 * 24 * 10,
]
let high_Data = [ //高亮部分的；结束时间的
1000 * 60 * 60 * 24 * 5,
1000 * 60 * 60 * 24 * 10,
1000 * 60 * 60 * 24 * 100,
1000 * 60 * 60 * 24 * 50,
]
let opacity_Data2 = [
1000 * 60 * 60 * 24 * 2,
1000 * 60 * 60 * 24 * 4,
1000 * 60 * 60 * 24 * 2,
1000 * 60 * 60 * 24 * 10,
]
let high_Data2 = [
1000 * 60 * 60 * 24 * 10,
1000 * 60 * 60 * 24 * 7,
1000 * 60 * 60 * 24 * 10,
1000 * 60 * 60 * 24 * 55,
]
const formatterTime = (d) => {
let d_ = new Date(d);
return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
}
let option = {
grid: {
containLabel: true,
right: '10%',
left: '5%',
bottom: '6%',
top: '10%',
},
legend: {
top: "5%",
data: ['计划时间', '实际时间'],
formatter: (v) => {
return `{a1|${v}}\n{a2|number}`
},
selectedMode: false, //这里禁止点击；需要的自己写事件使用filter动态setOption
icon: 'circle',
itemWidth: 14,
itemHeight: 14,
itemGap: 30,
textStyle: {
rich: {
a1: {
padding: [10, 0, 0, 0],
fontSize: 12,
fontWeight: 600,
},
a2: {
fontSize: 12,
fontWeight: 600,
}
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
formatter: function (ToolFormatterParam) {
let labels = `<div>
<b>${ToolFormatterParam[0].name}</b>
</div>`;
ToolFormatterParam.map((item) => {
let isSeriesNameZero = item.seriesName.includes('0');
if (!isSeriesNameZero) {
let startTime = ToolFormatterParam.filter((item2) => {
if (item2.seriesName.includes((item.seriesName + '0'))) {
return item2
}
})[0].value + date_timestr;
let endTime = null;
endTime = date_timestr + item.value;
let label_item = `<div>${item.seriesName}：${formatterTime(startTime)} 至 ${formatterTime(endTime)}</div>`
labels += label_item
}
})
return labels;
}
},
xAxis: {
type: 'value',
minInterval: 1000 * 60 * 60 * 24, //最小轴线分割 一天的的值 如果是小时自行修改
// 此处可
// 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
// 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
maxInterval: 1000 * 60 * 60 * 24 * 8, //最大轴线分割 一天的的值 如果是小时自行修改
axisLabel: {
fontSize: 12,
fontWeight: 600,
color: '#888',
formatter: function (val, index) {
let date_ = new Date(val + date_timestr);
let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
return label_;
},
// maxInterval 的设置刻度较多旋转显示
rotate: 20
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
},
},
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
data: ['收购痛讯', '亿个小目标', '下一个小目标', '周游世界'],
axisLabel: {
color: '#333',
fontSize: 12,
fontWeight: 600
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
// k = 0,1 隐藏的；k=1，2高亮的
color: [
'#fff',
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#4297FE', // 0% 处的颜色
},
{
offset: 1,
color: '#007BFF', // 0% 处的颜色
},
],
global: false, // 缺省为 false
},
'#fff',
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#5198FF', // 0% 处的颜色
},
{
offset: 1,
color: '#8BF8FE', // 0% 处的颜色
},
],
global: false, // 缺省为 false
}
],
series: [
{
//开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
name: '计划时间0',
type: 'bar',
stack: 'total',
label: {
show: false
},
itemStyle: {
opacity: 0,
},
emphasis: {
focus: 'series'
},
barWidth: 24,
barGap: '10%',
data: opacity_Data
},
{
name: '计划时间',
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
barWidth: 24,
barGap: '10%',
itemStyle: {
borderRadius: [6, 20, 20, 6]
},
data: high_Data
},
{
name: '实际时间0',
type: 'bar',
stack: 'total2',
label: {
show: false,
},
itemStyle: {
opacity: 0
},
barWidth: 24,
emphasis: {
focus: 'series'
},
barGap: '10%',
data: opacity_Data2
},
{
name: '实际时间',
type: 'bar',
stack: 'total2',
label: {
show: false
},
emphasis: {
focus: 'series'
},
barWidth: 24,
barGap: '10%',
itemStyle: {
borderRadius: [6, 20, 20, 6]
},
data: high_Data2
},
],
};