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(); };