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 = [
{ value: 1000 * 60 * 60 * 24 * 10, name: null },
{ value: 1000 * 60 * 60 * 24 * 7, name: '状态2', itemStyle: { color: 'gold' } },
{ value: 1000 * 60 * 60 * 24 * 10, name: '状态3', itemStyle: { color: 'green' } },
{ value: 1000 * 60 * 60 * 24 * 55, name: '状态4', itemStyle: { color: 'yellow' } },
]
const formatterTime = (d) => {
let d_ = new Date(d);
return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
}
let option = {
backgroundColor: "#fff",
grid: {
containLabel: true,
right: '10%',
left: '5%',
bottom: '6%',
top: '10%',
},
legend: [
{
top: "5%",
icon: 'roundRect',
data: ['计划时间', '实际时间', '状态1', '状态2', '状态3', '状态4'],
// selectedMode: false, //这里禁止点击；需要的自己写事件使用filter动态setOption
itemGap: 20,
textStyle: {
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
},
'red',
'gold',
'green',
'yellow'
],
series: [
{
//开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
name: '计划时间0',
type: 'bar',
stack: 'total',
label: {
show: false
},
itemStyle: {
opacity: 0,
},
id:'JHSJ_0',
barWidth: 24,
barGap: '10%',
data: opacity_Data
},
{
name: '计划时间',
type: 'bar',
stack: 'total',
label: {
show: false
},
id:'JHSJ_1',
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,
id:'SJSJ_0',
barGap: '10%',
data: opacity_Data2
},
{
name: '实际时间',
type: 'bar',
stack: 'total2',
label: {
show: false
},
barWidth: 24,
barGap: '10%',
itemStyle: {
borderRadius: [6, 20, 20, 6]
},
id:'SJSJ_1',
data: high_Data2
},
{
name: '状态1',
type: 'line',
data: [],
},
{
name: '状态2',
type: 'line',
data: [],
},
{
name: '状态3',
type: 'line',
data: [],
},
{
name: '状态4',
type: 'line',
data: [],
}
],
};
myChart.on('legendselectchanged', function (lparam) {
let selected = lparam.selected;
let c = JSON.parse(JSON.stringify(high_Data2)).map((v) => {
if (v.name && !selected[v.name]) {
return {
...v,
value: 0
}
} else {
return v
}
})
myChart.setOption({
series: {
id: 'SJSJ_1',
data: c
}
})
})