X轴的线不见了，想让他显示出来，求大神指点，求解！
<script>
/* eslint-disable */
import Vue from 'vue'
export default {
data() {
return {
option: {
backgroundColor: "#fff",
title: {
text: "项目工期",
padding: 20,
textStyle: {
fontSize: 17,
fontWeight: "bolder",
color: "#333"
},
subtextStyle: {
fontSize: 13,
fontWeight: "bolder"
}
},
legend: {
data: ["计划工期", "可行性研究阶段", "初步设计阶段", "施工图设计阶段", "项目实施阶段", "项目验收阶段"],
align: "right",
right: 80,
top: 50
},
grid: {
containLabel: true,
show: false,
right: 130,
left: 40,
bottom: 40,
top: 90
},
xAxis: {
type: "time",
axisLabel: {
formatter: function (value, index) {
var date = new Date(value);
let y = date.getFullYear(),
m = (date.getMonth() + 1) < 10 ? '0'+(date.getMonth() + 1) : (date.getMonth() + 1),
d = date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
console.log(y+''+m+''+d)
return m+'/'+d;
},
fontSize:14,
}
},
yAxis: {
axisLabel: {
show: true,
interval: 0,
},
data: ["生产线1", "生产线2", "生产线3"]
},
tooltip: {
trigger: "axis",
formatter: function(params) {
var res = "";
var name = "";
var start0 = "";
var start = "";
var end0 = "";
var end = "";
for (var i in params) {
var k = i % 2;
if (!k) { //偶数
start0 = params[i].data;
console.log(start0)
// start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
start = start0.getHours() + ":" + start0.getMinutes();
}
if (k) { //奇数
name = params[i].seriesName;
end0 = params[i].data;
// end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
end = end0.getHours() + ":" + end0.getMinutes();
res += name + " : " + end + "~" + start + "</br>";
}
}
return res;
}
},
series: [{
name: "计划工期",
type: "bar",
stack: "总量0",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "skyblue",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [
new Date("2021-06-01 17:30"),
new Date("2021-06-02 17:30"),
new Date("2021-06-03 17:30")]
},
{
name: "计划工期",
type: "bar",
stack: "总量0",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [
new Date("2021-06-01 8:30"),
new Date("2021-06-02 8:30"),
new Date("2021-06-03 8:30")]
},
{
name: "可行性研究阶段",
type: "bar",
stack: "总量2",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "pink",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [
new Date("2021-06-01 12:30"),
new Date("2021-06-02 15:50"),
new Date("2021-06-03 16:47")]
},
{
name: "可行性研究阶段",
type: "bar",
stack: "总量2",
itemStyle: {
normal: {
color: "white",
}
},
zlevel: -1,
z: 3,
data: [
new Date("2021-06-01 8:30"),
new Date("2021-06-02 9:48"),
new Date("2021-06-03 9:00")]
},
{
name: "初步设计阶段",
type: "bar",
stack: "总量3",
label: {
normal: {
show: true,
color: "#000",
position: "right",
formatter: function(params) {
return params.seriesName
}
}
},
itemStyle: {
normal: {
color: "yellow",
borderColor: "#fff",
borderWidth: 2
}
},
zlevel: -1,
data: [
new Date("2021-06-01 11:45"),
new Date("2021-06-02 13:53"),
new Date("2021-06-03 16:20")]
},
{
name: "初步设计阶段",
type: "bar",
stack: "总量3",
itemStyle: {
normal: {
color: "white"
}
},
zlevel: -1,
z: 3,
data: [
new Date("2021-06-01 8:30"),
new Date("2021-06-02 8:55"),
new Date("2021-06-03 9:43")]
},
]
}
}
},
mounted(){
var myChart = this.$echarts.init(document.getElementById('container'));
myChart.setOption(this.option);
},
methods: {
},
}
</script>
