标签：00 false color 08 甘特图 2018 type
let data = [
{
"list": [
{
"colorNum":0,
"endTime":"2018-08-04 08:00:00",
'type': 'new',
"item":"item1",
"quantity":1960,
"startTime":"2018-08-02 8:00:00",
},
{
"colorNum":1,
"endTime":"2018-08-04 12:00:00",
"item":"item2",
'type': 'new',
"quantity":492,
"startTime":"2018-08-04 08:00:00",
},
{
"colorNum":2,
"endTime":"2018-08-04 18:00:00",
"item":"item3",
'type': 'new',
"quantity":20837,
"startTime":"2018-08-04 12:00:00",
},
{
"colorNum":3,
"endTime":"2018-08-05 12:00:00",
"item":"item4",
'type': 'new',
"quantity":3620,
"startTime":"2018-08-04 18:00:00",
},
{
"colorNum":0,
"endTime":"2018-08-05 24:00:00",
"item":"item5",
'type': 'new',
"quantity":7200,
"startTime":"2018-08-05 12:00:00",
},
{
"colorNum":0,
"endTime":"2018-08-04 16:00:00",
'type': 'old',
"item":"item1",
"quantity":1960,
"startTime":"2018-08-02 02:00:00",
},
{
"colorNum":1,
"endTime":"2018-08-05 12:00:00",
"item":"item2",
'type': 'old',
"quantity":492,
"startTime":"2018-08-04 16:00:00",
},
{
"colorNum":2,
"endTime":"2018-08-06 18:00:00",
"item":"item3",
'type': 'old',
"quantity":20837,
"startTime":"2018-08-05 12:00:00",
},
{
"colorNum":3,
"endTime":"2018-08-07 12:00:00",
"item":"item4",
'type': 'old',
"quantity":3620,
"startTime":"2018-08-06 18:00:00",
},
{
"colorNum":0,
"endTime":"2018-08-09 24:00:00",
"item":"item5",
'type': 'old',
"quantity":7200,
"startTime":"2018-08-07 12:00:00",
},
],
"plant": "工厂1"
},
// {
// "list": [
// {
// "startTime": "2018-08-03 12:00:00",
// "endTime": "2018-08-04 12:00:00",
// "quantity": 20,
// 'colorNum':0,
// 'item':'item1',
// 'type': 'new',
// },
// {
// "startTime": "2018-08-03 12:00:00",
// "endTime": "2018-08-04 12:00:00",
// "quantity": 20,
// 'colorNum':0,
// 'item':'item1',
// 'type': 'old',
// }
// ],
// "plant": "工厂2"
// },
{
"list": [
{
"startTime": "2018-08-04 12:00:00",
"endTime": "2018-08-06 00:00:00",
"quantity": 30,
'colorNum':0,
'item':'item1',
'type': 'new',
},
{
"startTime": "2018-08-06 08:00:00",
"endTime": "2018-08-06 12:00:00",
"quantity": 20,
'colorNum':1,
'item':'item2',
'type': 'new',
},
{
"startTime": "2018-08-06 14:00:00",
"endTime": "2018-08-08 12:00:00",
"quantity": 10,
'colorNum':2,
'item':'item3',
'type': 'new',
},
{
"startTime": "2018-08-08 20:00:00",
"endTime": "2018-08-10 12:00:00",
"quantity": 10,
'colorNum':3,
'item':'item4',
'type': 'new',
},
{
"startTime": "2018-08-04 12:00:00",
"endTime": "2018-08-06 00:00:00",
"quantity": 30,
'colorNum':0,
'item':'item1',
'type': 'old',
},
{
"startTime": "2018-08-06 08:00:00",
"endTime": "2018-08-06 12:00:00",
"quantity": 20,
'colorNum':1,
'item':'item2',
'type': 'old',
},
{
"startTime": "2018-08-06 14:00:00",
"endTime": "2018-08-08 12:00:00",
"quantity": 10,
'colorNum':2,
'item':'item3',
'type': 'old',
},
{
"startTime": "2018-08-08 20:00:00",
"endTime": "2018-08-10 12:00:00",
"quantity": 10,
'colorNum':3,
'item':'item4',
'type': 'old',
}
],
"plant": "工厂3"
},
// {
// "list": [
// {
// "startTime": "2018-08-02 20:00:00",
// "endTime": "2018-08-03 12:00:00",
// "quantity": 20,
// 'colorNum':1,
// 'item':'item1',
// },
// {
// "startTime": "2018-08-03 20:00:00",
// "endTime": "2018-08-04 12:00:00",
// "quantity": 15,
// 'colorNum':2,
// 'item':'item2',
// },
// {
// "startTime": "2018-08-04 20:00:00",
// "endTime": "2018-08-05 12:00:00",
// "quantity": 15,
// 'colorNum':3,
// 'item':'item3',
// },
// ],
// "plant": "工厂4"
// },
]
let start_="2018-08-02 00:00:00", end_="2018-11-05 24:00:00"; //自定义时间
let seriesData = [];
let yAxisData_plant = []; //工厂名
let item1Data = [];
let item2Data = [];
let item3Data = [];
let item4Data = [];
let item5Data = [];
data.forEach((item, index) => {
yAxisData_plant.push(item.plant);
let bgColor;
item.list.forEach((listItem, listIndex) => {
switch (listItem.colorNum) {
case 0:
bgColor = 'rgba(0,187,255,1)';
break;
case 1:
bgColor = 'rgba(80,227,194,1)';
break;
case 2:
bgColor = 'rgba(255,115,115,1)';
break;
case 3:
bgColor = 'rgba(255,207,107,1)';
break;
default:
bgColor = 'rgba(0,187,255,1)'
}
let startTime = new Date(listItem.startTime).getTime();
let endTime = new Date(listItem.endTime).getTime();
switch (listItem.item) {
case 'item1':
item1Data.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
break;
case 'item2':
item2Data.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
break;
case 'item3':
item3Data.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
break;
case 'item4':
item4Data.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
break;
case 'item5':
item5Data.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
break;
default:
// code
}
seriesData.push({
name: listItem.item,
value: [
index,
startTime,
endTime,
listItem.quantity,
listItem.type
],
itemStyle: {
normal: {
color: bgColor
}
}
});
})
});
console.log(item1Data,item2Data,item3Data)
renderItem11 = function (params, api) {
var categoryIndex = api.value(0);
var type = api.value(4);
console.log(type)
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - 10,
width: end[0] - start[0],
height: 20
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
console.log(rectShape)
// return rectShape && {
// type: 'rect',
// shape: rectShape,
// style: api.style()
// };
return rectShape && {
type: 'group',
position :type === 'new' ? [0,-20] : [0 ,20],
children: [ {
id:'1',
type: 'rect',
shape: rectShape,
style: api.style()
},
{
id:'2',
type: 'circle',
shape:
{cx: start[0] , cy: start[1], r: 9.5},
style: api.style()
},
{
id:'3',
type: 'circle',
shape:
{cx: end[0] , cy: start[1], r: 9.5},
style: api.style()
}
]
};
},
console.log(seriesData)
option = {
backgroundColor: '#26263C',
tooltip: {
show :true,
type:'shadow',
trigger:'axis',
axisPointer: {
shadowStyle: {
color: "red"
}
},
formatter: function (params) {
console.log(params)
return params.marker + params.name + '55';
}
},
grid: [{
top: 80,
left: 300,
bottom: 50,
right:150,
height:300,
},
{
top: 80,
left: 200,
width: 100,
bottom: 70,
height:300,
},
{
top: 80,
left: 150,
width: 5,
bottom: 70,
height: 300,
},
{
top: 80,
right:50,
width: 5,
bottom: 70,
height: 300,
}
],
dataZoom: [{
show: true,
type: '',
filterMode: 'none',
realtime: false,
height: 10,
top: 470,
startValue:new Date(start_).getTime(),
endValue:new Date(start_).getTime() + 3600 * 24 * 1000 * 7,
minValueSpan: 3600 * 24 * 1000 * 7,
handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
handleSize: '120%',
handleStyle: {
color: "#fff",
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 4
},
textStyle: {
color: "transparent"
},
borderColor: 'transparent',
backgroundColor: '#D7F4FF',
dataBackground: {
lineStyle: {
width: 0
},
areaStyle: {
color: 'transparent'
}
},
fillerColor: '#00EBFF',
labelFormatter: ''
},
// {
// type: "inside",
// show: true,
// zoomOnMouseWheel: false,
// moveOnMouseWheel: true,
// moveOnMouseMove: true,
// preventDefaultMouseMove: true
// }
],
xAxis: [{
type: 'time',
min: new Date(start_).getTime(),
max: new Date(end_).getTime(),
gridIndex: 0,
scale: true,
position: 'bottom',
splitNumber: 7,
axisLabel: {
show: true,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
formatter:function (value, index) {
console.log(value,index,'llll')
var date = new Date(value);
var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('/');
return texts;
}
},
axisLine: {show: false,},
splitLine: {
show: true,
lineStyle: {color: 'rgba(233,233,233,0.1)'}
},
axisTick: {
lineStyle: {
color: '#fff'
}
},
},
{
type: 'value',
position: 'bottom',
gridIndex: 1,
inverse:false,
scale:false,
axisLine: {
show: false,
onZero: true,
color: '#ffffff'
},
offset: 0,
splitNumber: 3,
axisLabel: {
show: false,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
},
splitLine: {
show: false,
// lineStyle: {color: 'red'}
},
axisTick: {
show: false
}
},
{
type: 'value',
position: 'bottom',
gridIndex: 2,
inverse:false,
scale:false,
axisLine: {
show: false,
onZero: true,
color: '#ffffff'
},
offset: 0,
splitNumber: 3,
axisLabel: {
show: false,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
},
splitLine: {
show: false,
// lineStyle: {color: 'red'}
},
axisTick: {
show: false
}
},
{
type: 'value',
position: 'bottom',
gridIndex: 3,
inverse:false,
scale:false,
axisLine: {
show: false,
onZero: true,
color: '#ffffff'
},
offset: 0,
splitNumber: 3,
axisLabel: {
show: false,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
},
splitLine: {
show: false,
// lineStyle: {color: 'red'}
},
axisTick: {
show: false
}
}
],
yAxis: [{
gridIndex: 0,
axisLine: {
onZero: true,
show: true,
},
axisLabel: {
show: false,
textStyle: {color: '#ffffff'},
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {color: 'rgba(233,233,233,0.1)'}
},
// inverse: true,
data: yAxisData_plant
},
{
splitLine: {
show: false,
lineStyle: {color: 'red'}
},
// position: 'right',
gridIndex: 1,
axisLabel: {
show: true,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 24,
formatter: function (value) {
return '{value|new}\n{value|old}';
},
rich: {
value: {
lineHeight: 40,
align: 'center',
fontSize: 14,
},
}
},
data: ['工厂1','工厂3']
},
{
splitLine: {
show: false,
lineStyle: {color: 'red'}
},
position: 'left',
gridIndex: 2,
name: '23',
axisLabel: {
show: true,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
},
axisLine: {
show: false,
},
data: ['工厂1','工厂3']
},
{
splitLine: {
show: false,
lineStyle: {color: 'red'}
},
axisLine: {
show: false,
},
name:"总量",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
align: "right",
padding: [0, 18, 0, 0]
},
position: 'left',
gridIndex: 3,
axisLabel: {
show: true,
textStyle: {color: '#ffffff'},
interval: 0,
margin: 15,
fontSize: 14,
},
data: ['1200','3100']
}
],
// legend: {
// data: ['蒸发量', '降水量']
// },
legend: {
show: true,
// left: 'auto',
top: 20,
textStyle: {
color: "rgba(244, 244, 244, 1)"
},
data: ['item0','item1','item2','item3','item4','item5'],
},
series: [{
type: 'custom',
name:'item1',
xAxisIndex: 0,
renderItem: renderItem11,
zlevel:6,
// animation:false,
animationDuration:200,
clip:true,
encode: {
x: [1, 2],
y: 0
},
data: item1Data
},
{
type: 'custom',
xAxisIndex: 0,
name:'item2',
renderItem: renderItem11,
z:5,
animationDuration:200,
// animation:false,
clip:true,
encode: {
x: [1, 2],
y: 0
},
data: item2Data
},{
type: 'custom',
xAxisIndex: 0,
name:'item3',
renderItem: renderItem11,
z:4,
animationDuration:200,
// animation:false,
clip:true,
encode: {
x: [1, 2],
y: 0
},
data: item3Data
},{
type: 'custom',
xAxisIndex: 0,
name:'item4',
renderItem: renderItem11,
z:3,
animationDuration:200,
// animation:false,
clip:true,
encode: {
x: [1, 2],
y: 0
},
data: item4Data
},{
type: 'custom',
xAxisIndex: 0,
name:'item5',
renderItem: renderItem11,
z:2,
animationDuration:200,
// animation:false,
clip:true,
encode: {
x: [1, 2],
y: 0
},
data: item5Data
},
{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
name:'new',
// renderItem: renderItem11,
z:1,
animationDuration:200,
// animation:false,
// clip:true,
// encode: {
// x: [1, 2],
// y: 0
// },
barWidth: 20,
barGap: '100%',
itemStyle: {
color: "rgba(37, 119, 170, 1)",
barBorderRadius: [10, 0, 0, 10]
},
data: [-220,-152]
},
{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
name:'old',
// renderItem: renderItem11,
z:1,
animationDuration:200,
// animation:false,
// clip:true,
// encode: {
// x: [1, 2],
// y: 0
// },
itemStyle: {
color: "rgba(37, 119, 170, 1)",
barBorderRadius: [10, 0, 0, 10]
},
barWidth: 20,
data: [-220,-152]
},
]
}
let data = [ { "list": [ { "colorNum":0, "endTime":"2018-08-04 08:00:00", 'type': 'new', "item":"item1", "quantity":1960, "startTime":"2018-08-02 8:00:00", }, { "colorNum":1, "endTime":"2018-08-04 12:00:00", "item":"item2", 'type': 'new', "quantity":492, "startTime":"2018-08-04 08:00:00", }, { "colorNum":2, "endTime":"2018-08-04 18:00:00", "item":"item3", 'type': 'new', "quantity":20837, "startTime":"2018-08-04 12:00:00", }, { "colorNum":3, "endTime":"2018-08-05 12:00:00", "item":"item4", 'type': 'new', "quantity":3620, "startTime":"2018-08-04 18:00:00", }, { "colorNum":0, "endTime":"2018-08-05 24:00:00", "item":"item5", 'type': 'new', "quantity":7200, "startTime":"2018-08-05 12:00:00", }, { "colorNum":0, "endTime":"2018-08-04 16:00:00", 'type': 'old', "item":"item1", "quantity":1960, "startTime":"2018-08-02 02:00:00", }, { "colorNum":1, "endTime":"2018-08-05 12:00:00", "item":"item2", 'type': 'old', "quantity":492, "startTime":"2018-08-04 16:00:00", }, { "colorNum":2, "endTime":"2018-08-06 18:00:00", "item":"item3", 'type': 'old', "quantity":20837, "startTime":"2018-08-05 12:00:00", }, { "colorNum":3, "endTime":"2018-08-07 12:00:00", "item":"item4", 'type': 'old', "quantity":3620, "startTime":"2018-08-06 18:00:00", }, { "colorNum":0, "endTime":"2018-08-09 24:00:00", "item":"item5", 'type': 'old', "quantity":7200, "startTime":"2018-08-07 12:00:00", }, ], "plant": "工厂1" }, // { // "list": [ // { // "startTime": "2018-08-03 12:00:00", // "endTime": "2018-08-04 12:00:00", // "quantity": 20, // 'colorNum':0, // 'item':'item1', // 'type': 'new', // }, // { // "startTime": "2018-08-03 12:00:00", // "endTime": "2018-08-04 12:00:00", // "quantity": 20, // 'colorNum':0, // 'item':'item1', // 'type': 'old', // } // ], // "plant": "工厂2" // }, { "list": [ { "startTime": "2018-08-04 12:00:00", "endTime": "2018-08-06 00:00:00", "quantity": 30, 'colorNum':0, 'item':'item1', 'type': 'new', }, { "startTime": "2018-08-06 08:00:00", "endTime": "2018-08-06 12:00:00", "quantity": 20, 'colorNum':1, 'item':'item2', 'type': 'new', }, { "startTime": "2018-08-06 14:00:00", "endTime": "2018-08-08 12:00:00", "quantity": 10, 'colorNum':2, 'item':'item3', 'type': 'new', }, { "startTime": "2018-08-08 20:00:00", "endTime": "2018-08-10 12:00:00", "quantity": 10, 'colorNum':3, 'item':'item4', 'type': 'new', }, { "startTime": "2018-08-04 12:00:00", "endTime": "2018-08-06 00:00:00", "quantity": 30, 'colorNum':0, 'item':'item1', 'type': 'old', }, { "startTime": "2018-08-06 08:00:00", "endTime": "2018-08-06 12:00:00", "quantity": 20, 'colorNum':1, 'item':'item2', 'type': 'old', }, { "startTime": "2018-08-06 14:00:00", "endTime": "2018-08-08 12:00:00", "quantity": 10, 'colorNum':2, 'item':'item3', 'type': 'old', }, { "startTime": "2018-08-08 20:00:00", "endTime": "2018-08-10 12:00:00", "quantity": 10, 'colorNum':3, 'item':'item4', 'type': 'old', } ], "plant": "工厂3" }, // { // "list": [ // { // "startTime": "2018-08-02 20:00:00", // "endTime": "2018-08-03 12:00:00", // "quantity": 20, // 'colorNum':1, // 'item':'item1', // }, // { // "startTime": "2018-08-03 20:00:00", // "endTime": "2018-08-04 12:00:00", // "quantity": 15, // 'colorNum':2, // 'item':'item2', // }, // { // "startTime": "2018-08-04 20:00:00", // "endTime": "2018-08-05 12:00:00", // "quantity": 15, // 'colorNum':3, // 'item':'item3', // }, // ], // "plant": "工厂4" // }, ]let start_="2018-08-02 00:00:00", end_="2018-11-05 24:00:00"; //自定义时间let seriesData = [];let yAxisData_plant = []; //工厂名let item1Data = [];let item2Data = [];let item3Data = [];let item4Data = [];let item5Data = [];
data.forEach((item, index) => { yAxisData_plant.push(item.plant); let bgColor; item.list.forEach((listItem, listIndex) => { switch (listItem.colorNum) { case 0: bgColor = 'rgba(0,187,255,1)'; break; case 1: bgColor = 'rgba(80,227,194,1)'; break; case 2: bgColor = 'rgba(255,115,115,1)'; break; case 3: bgColor = 'rgba(255,207,107,1)'; break; default: bgColor = 'rgba(0,187,255,1)' } let startTime = new Date(listItem.startTime).getTime(); let endTime = new Date(listItem.endTime).getTime(); switch (listItem.item) { case 'item1': item1Data.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); break; case 'item2': item2Data.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); break; case 'item3': item3Data.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); break; case 'item4': item4Data.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); break; case 'item5': item5Data.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); break; default: // code } seriesData.push({ name: listItem.item, value: [ index, startTime, endTime, listItem.quantity, listItem.type ], itemStyle: { normal: { color: bgColor } } }); })
});
console.log(item1Data,item2Data,item3Data)
renderItem11 = function (params, api) { var categoryIndex = api.value(0); var type = api.value(4); console.log(type) var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - 10, width: end[0] - start[0], height: 20 }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); console.log(rectShape)
// return rectShape && { // type: 'rect', // shape: rectShape, // style: api.style() // }; return rectShape && { type: 'group', position :type === 'new' ? [0,-20] : [0 ,20], children: [ { id:'1', type: 'rect', shape: rectShape, style: api.style() }, { id:'2', type: 'circle', shape: {cx: start[0] , cy: start[1], r: 9.5}, style: api.style() }, { id:'3', type: 'circle', shape: {cx: end[0] , cy: start[1], r: 9.5}, style: api.style() } ] };
},
console.log(seriesData)option = { backgroundColor: '#26263C', tooltip: { show :true, type:'shadow', trigger:'axis', axisPointer: { shadowStyle: { color: "red" } }, formatter: function (params) { console.log(params) return params.marker + params.name + '55'; } }, grid: [{ top: 80, left: 300, bottom: 50, right:150, height:300, }, { top: 80, left: 200, width: 100, bottom: 70, height:300, }, { top: 80, left: 150, width: 5, bottom: 70, height: 300, }, { top: 80, right:50, width: 5, bottom: 70, height: 300, } ], dataZoom: [{ show: true, type: '', filterMode: 'none', realtime: false, height: 10, top: 470, startValue:new Date(start_).getTime(), endValue:new Date(start_).getTime() + 3600 * 24 * 1000 * 7, minValueSpan: 3600 * 24 * 1000 * 7, handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0', handleSize: '120%', handleStyle: { color: "#fff", shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 4 }, textStyle: { color: "transparent" }, borderColor: 'transparent', backgroundColor: '#D7F4FF', dataBackground: { lineStyle: { width: 0 }, areaStyle: { color: 'transparent' } }, fillerColor: '#00EBFF', labelFormatter: '' }, // { // type: "inside", // show: true, // zoomOnMouseWheel: false, // moveOnMouseWheel: true, // moveOnMouseMove: true, // preventDefaultMouseMove: true // } ], xAxis: [{ type: 'time', min: new Date(start_).getTime(), max: new Date(end_).getTime(), gridIndex: 0, scale: true, position: 'bottom', splitNumber: 7, axisLabel: { show: true, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, formatter:function (value, index) { console.log(value,index,'llll') var date = new Date(value); var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('/'); return texts; } }, axisLine: {show: false,}, splitLine: { show: true, lineStyle: {color: 'rgba(233,233,233,0.1)'} }, axisTick: { lineStyle: { color: '#fff' } }, }, { type: 'value', position: 'bottom', gridIndex: 1, inverse:false, scale:false, axisLine: { show: false, onZero: true, color: '#ffffff' }, offset: 0, splitNumber: 3, axisLabel: { show: false, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, }, splitLine: { show: false, // lineStyle: {color: 'red'} }, axisTick: { show: false } }, { type: 'value', position: 'bottom', gridIndex: 2, inverse:false, scale:false, axisLine: { show: false, onZero: true, color: '#ffffff' }, offset: 0, splitNumber: 3, axisLabel: { show: false, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, }, splitLine: { show: false, // lineStyle: {color: 'red'} }, axisTick: { show: false } }, { type: 'value', position: 'bottom', gridIndex: 3, inverse:false, scale:false, axisLine: { show: false, onZero: true, color: '#ffffff' }, offset: 0, splitNumber: 3, axisLabel: { show: false, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, }, splitLine: { show: false, // lineStyle: {color: 'red'} }, axisTick: { show: false } } ], yAxis: [{ gridIndex: 0, axisLine: { onZero: true, show: true, }, axisLabel: { show: false, textStyle: {color: '#ffffff'}, fontSize: 14 }, splitLine: { show: true, lineStyle: {color: 'rgba(233,233,233,0.1)'} }, // inverse: true, data: yAxisData_plant }, { splitLine: { show: false, lineStyle: {color: 'red'} }, // position: 'right', gridIndex: 1, axisLabel: { show: true, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 24, formatter: function (value) { return '{value|new}\n{value|old}'; }, rich: { value: { lineHeight: 40, align: 'center', fontSize: 14, }, } }, data: ['工厂1','工厂3'] }, { splitLine: { show: false, lineStyle: {color: 'red'} }, position: 'left', gridIndex: 2, name: '23', axisLabel: { show: true, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, }, axisLine: { show: false, }, data: ['工厂1','工厂3'] }, { splitLine: { show: false, lineStyle: {color: 'red'} }, axisLine: { show: false, }, name:"总量", nameTextStyle: { color: "rgba(255, 255, 255, 1)", align: "right", padding: [0, 18, 0, 0] }, position: 'left', gridIndex: 3, axisLabel: { show: true, textStyle: {color: '#ffffff'}, interval: 0, margin: 15, fontSize: 14, }, data: ['1200','3100'] } ], // legend: { // data: ['蒸发量', '降水量'] // }, legend: { show: true, // left: 'auto', top: 20, textStyle: { color: "rgba(244, 244, 244, 1)" }, data: ['item0','item1','item2','item3','item4','item5'], }, series: [{ type: 'custom', name:'item1', xAxisIndex: 0, renderItem: renderItem11, zlevel:6, // animation:false, animationDuration:200, clip:true, encode: { x: [1, 2], y: 0 }, data: item1Data }, { type: 'custom', xAxisIndex: 0, name:'item2', renderItem: renderItem11, z:5, animationDuration:200, // animation:false, clip:true, encode: { x: [1, 2], y: 0 }, data: item2Data },{ type: 'custom', xAxisIndex: 0, name:'item3', renderItem: renderItem11, z:4, animationDuration:200, // animation:false, clip:true, encode: { x: [1, 2], y: 0 }, data: item3Data },{ type: 'custom', xAxisIndex: 0, name:'item4', renderItem: renderItem11, z:3, animationDuration:200, // animation:false, clip:true, encode: { x: [1, 2], y: 0 }, data: item4Data },{ type: 'custom', xAxisIndex: 0, name:'item5', renderItem: renderItem11, z:2, animationDuration:200, // animation:false, clip:true, encode: { x: [1, 2], y: 0 }, data: item5Data }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, name:'new', // renderItem: renderItem11, z:1, animationDuration:200, // animation:false, // clip:true, // encode: { // x: [1, 2], // y: 0 // }, barWidth: 20, barGap: '100%', itemStyle: { color: "rgba(37, 119, 170, 1)", barBorderRadius: [10, 0, 0, 10] }, data: [-220,-152] }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, name:'old', // renderItem: renderItem11, z:1, animationDuration:200, // animation:false, // clip:true, // encode: { // x: [1, 2], // y: 0 // }, itemStyle: { color: "rgba(37, 119, 170, 1)", barBorderRadius: [10, 0, 0, 10] }, barWidth: 20, data: [-220,-152] }, ] }
标签：00,false,color,08,甘特图,2018,type 来源： https://www.cnblogs.com/HePandeFeng/p/13901224.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。