Xiao ru魚 2021-06-24 09:19 采纳率: 50%
浏览 671
已采纳

echarts时间轴,定义X轴问题

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>

 

  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2021-06-24 09:34
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上
  • ¥15 IPQ5018制作烧录固件,boot运行失败(操作系统-linux)(相关搜索:操作系统)(相关搜索:操作系统)