vue echart甘特图
let _this = this;let data = [
{
list: [
{
colorNum: 0,
endTime: "2019-10-10 00:00:00",
item: "墙柱",
quantity: 1960,
startTime: "2019-10-08 00:00:00"
}
],
plant: "墙柱"
},
{
list: [
{
colorNum: 1,
endTime: "2019-10-12 00:00:00",
item: "楼面",
quantity: 1960,
startTime: "2019-10-09 00:00:00"
}
],
plant: "楼面"
},
{
list: [
{
colorNum: 2,
endTime: "2019-10-10 00:00:00",
item: "梁",
quantity: 1960,
startTime: "2019-10-08 00:00:00"
}
],
plant: "梁"
},
{
list: [
{
colorNum: 3,
endTime: "2019-10-11 00:00:00",
item: "吊模",
quantity: 1960,
startTime: "2019-10-09 00:00:00"
}
],
plant: "吊模"
},
{
list: [
{
colorNum: 4,
endTime: "2019-10-10 00:00:00",
item: "K版",
quantity: 1960,
startTime: "2019-10-08 00:00:00"
}
],
plant: "K版"
},
{
list: [
{
colorNum: 5,
endTime: "2019-10-14 00:00:00",
item: "盖板",
quantity: 1960,
startTime: "2019-10-11 00:00:00"
}
],
plant: "盖板"
},
{
list: [
{
colorNum: 6,
endTime: "2019-10-13 00:00:00",
item: "墙柱",
quantity: 1960,
startTime: "2019-10-12 00:00:00"
}
],
plant: "墙柱"
}
];
let start_ = "2019-10-08 00:00:00",
end_ = "2019-10-14 24:00:00"; //自定义时间
let seriesData = [];
let yAxisData_plant = []; //工厂名
data.forEach((item, index) => {
yAxisData_plant.push(item.plant);
let bgColor;
item.list.forEach((listItem, listIndex) => {
switch (listItem.colorNum) {
case 0:
bgColor = "#9446FD";
break;
case 1:
bgColor = "#5EBD3C";
break;
case 2:
bgColor = "#169ADC";
break;
case 3:
bgColor = "#4BE2DA";
break;
case 4:
bgColor = "#F5C100";
break;
case 5:
bgColor = "#FC677A";
break;
case 6:
bgColor = "#FF8800";
break;
default:
bgColor = "rgba(0,187,255,.4)";
}
let startTime = new Date(listItem.startTime).getTime();
let endTime = new Date(listItem.endTime).getTime();
seriesData.push({
name: listItem.item,
value: [index, startTime, endTime, listItem.quantity],
itemStyle: {
normal: {
color: bgColor
}
}
});
});
});
let option = {
// backgroundColor: "#26263C",
tooltip: {
formatter: function(params) {
//console.log(params)
return params.marker + params.name;
}
},
grid: {
top: 100,
left: 150,
right: 100,
bottom: 50
},
xAxis: {
type: "time",
min: new Date(start_).getTime(),
max: new Date(end_).getTime(),
scale: true,
position: "top",
splitNumber: 7,
axisLabel: {
show: true,
textStyle: {
color: "#ffffff"
},
interval: 0,
margin: 15,
fontSize: 30,
formatter: function(value, index) {
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"
}
}
},
yAxis: {
axisLine: {
onZero: false,
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#ffffff"
},
fontSize: 30
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(233,233,233,0.1)"
}
},
inverse: true,
data: yAxisData_plant
},
series: [
{
type: "custom",
renderItem: function(params, api) {
var categoryIndex = api.value(0);
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 = _this.$echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - 15,
width: end[0] - start[0],
height: 30
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: "rect",
shape: rectShape,
style: api.style()
}
);
},
encode: {
x: [1, 2],
y: 0
},
data: seriesData
}
]
};
let myChart = this.$echarts.init(this.$refs.ganttChart);
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
};
以上是 vue echart甘特图 的全部内容， 来源链接： utcz.com/z/379814.html
