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