winform平台实现 “甘特图” 不套用第三方控件的解决方案

最新推荐文章于 2024-06-21 16:57:57 发布

欧巴酱

最新推荐文章于 2024-06-21 16:57:57 发布

阅读量2.9k

点赞数 2

本文链接：https://blog.csdn.net/qq_36894527/article/details/83856394

版权

主要思路是在web端实现甘特图实例后 winform套用

1.web界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gattery</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/echarts.common.min.js"></script>
    //<script src="js/echarts.min.js"></script>
    <script>
        $(function () {
            alert(123)
            $("#head").text(123);})
    </script>
</head>
<body>
    <div id="head"></div>
    <div id="container"  style="width:100%;height:400px;border:1px solid red"></div>
    <script>
        var myCharts = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '项目实施进度表',
                left: 10
            },
            legend: {
                y: 'bottom',
                data: ['计划时间', '实际时间']  //修改的地方1

            },
            grid: {
                containLabel: true,
                left: 20
            },
            xAxis: {
                type: 'time'
            },

            yAxis: {

                data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']

            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var res = params[0].name + "</br>"
                    var date0 = params[0].data;
                    var date1 = params[1].data;
                    var date2 = params[2].data;
                    var date3 = params[3].data;
                    date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
                    date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
                    date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
                    date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
                    res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
                    res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
                    console.log(params[0]);
                    return res;
                }
            },
            series: [
                {
                    name: '计划开始时间',
                    type: 'bar',
                    stack: 'test1',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [
                        new Date("2015/09/2"),
                        new Date("2015/09/15"),
                        new Date("2015/09/15"),
                        new Date("2015/10/03"),
                        new Date("2015/10/04"),
                        new Date("2015/10/05"),
                        new Date("2015/10/06")
                    ]
                },
                {
                    name: '计划时间',
                    type: 'bar',
                    stack: 'test1',
                    //修改地方2
                    itemStyle: {
                        normal: {
                            color: '#F98563'
                        }
                    },
                    data: [
                        new Date("2015/09/12"),
                        new Date("2015/09/20"),
                        new Date("2015/09/25"),
                        new Date("2015/10/05"),
                        new Date("2015/10/07"),
                        new Date("2015/10/09"),
                        new Date("2015/10/12")
                    ]
                },
                {
                    name: '实际开始时间',
                    type: 'bar',
                    stack: 'test2',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [
                        new Date("2015/09/2"),
                        new Date("2015/09/15"),
                        new Date("2015/09/15"),
                        new Date("2015/10/03"),
                        new Date("2015/10/04"),
                        new Date("2015/10/05"),
                        new Date("2015/10/06")
                    ]
                },
                {
                    name: '实际时间',
                    type: 'bar',
                    stack: 'test2',
                    //修改地方3
                    itemStyle: {
                        normal: {
                            color: '#A2E068'
                        }
                    },
                    data: [
                        new Date("2015/09/6"),
                        new Date("2015/09/20"),
                        new Date("2015/09/27"),
                        new Date("2015/10/11"),
                        new Date("2015/10/16"),
                        new Date("2015/10/18"),
                        new Date("2015/10/17")
                    ]
                }
            ]
        };
        myCharts.setOption(option);
    </script>
</body>
</html>

2.winform后台代码（启用webBrowser控件）

  private void Form1_Load(object sender, EventArgs e)
  {
        string path = AppDomain.CurrentDomain.BaseDirectory + "../../test1.html";
        webBrowser1.Url = new Uri(path, UriKind.Absolute);
            
  }

3.效果图

欧巴酱

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
winform平台实现 “甘特图” 不套用第三方控件的解决方案

主要思路是在web端实现甘特图实例后 winform套用1.web界面&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-w
复制链接

扫一扫