echart绘表和甘特图实现

最新推荐文章于 2024-04-11 10:54:12 发布

VIP文章 CodeSausage

最新推荐文章于 2024-04-11 10:54:12 发布

阅读量8.3k

点赞数 4

分类专栏： Django开发文章标签： echart 图表 Django 甘特图

本文链接：https://blog.csdn.net/sinat_35815038/article/details/86646809

版权

echart绘曲线图和甘特图实现

今天，我们来总结一下，如何在网页上实现曲线图的绘制，以及甘特图的绘制。

1. echart实现绘制曲线图

一开始，我想到的解决办法，不是用echart绘曲线图，而是用matplotlib绘制，这种办法的思路，就是在后台将数据通过matplotlib.pyplo绘制得到折线图，然后将图片保存到本地，再通过前端，将图片显示在网页上，效果其实也还可以，就像下图一样：
用matplotlib绘制折线图
但是，这种绘制方法，不够灵活，更改起来比较复杂，因为matplotlib绘制起来也不是特别方便好用。

所以，echart这一利器，就显得十分高效。
首先，下载echart的js文件，并且在代码中引入：

<script type="text/javascript" src="/static/js/echarts.min.js"></script>

接着，在< body>标签中，留出图表的位置容器：

<div id="main" style="width: 600px; height: 400px; margin-left: 200px;"></div>

然后，我们就可以在js区域，编写echart绘制折线图的代码了：

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var sales = {
  { sales_data|safe }};
    var productions = {
  { produc_data|safe }};
    
    var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量','产量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                smooth: true,
                data: sales,
            },
            {
                name: '产量',
                type: 'line',
                smooth: true,
                data: productions,
            }]
        };

    myChart.setOption(option);

其中的type这里设置的是line，即折线图，还可以设置bar、pie等不同图表类型。代码中的sales_data和produc_data是通过后台传递过来的变量，具体传递方式涉及Django向js传送数据的格式要求，比如后台要把数据变成json格式，前端接收时，要加safe过滤器等。在我的另一篇博客中有讲。传送门：jqgrid获取数据库数据
绘制得到的结果，如下图：
echart绘制图表

2. 实现甘特图

2.1 通过echart实现甘特图

echart功能还是比较强大的，这里，我尝试用echart绘制甘特图，虽然最后也绘制出来了一个差不多的图，但是距离真正的甘特图还差很多，只是达到了“看起来很像”罢了，代码和结果图一并贴上来，想学习的话可以参考一下：

<body>
<div id="gantt" style="width: 600px; height: 400px; margin-left: 200px;"></div>
</body>
<script>
var ganttChart = echarts.init(document.getElementById('gantt'));
var opt2 = {
    
    title: {
    
        text: '项目实施进度表',
        left: 10
    },
    legend: {
    
        data: ['计划实施时间', '实际实施时间']
    },
    grid: {
    
        containLabel: true,
        left: 20
    },
    xAxis: {
    
        type: 'value'
    },

    yAxis: {
    
        data: ['任务一', '任务二', '任务三', '任务四']
    },
    tooltip: {
    },
    series: [
        {
    
            name: '计划开始时间',
            type: 'bar',
            stack: 'test',
            itemStyle: {
    
                normal: {
    
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                5, 10, 21, 25
            ]
        },
        {
    
            name: '计划完成时间',
            type: 'bar',
            stack: 'test',
            data: [
                15, 18, 24, 29
            ]
        },
        {
    
            name: '实际开始时间',
            type: 'bar',
            stack: 'test1',
            itemStyle: {
    
                normal: {
    
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                5, 18, 24, 26
            ]
        },
        {
    
            name: '实际完成时间',
            type: 'bar',
            stack: 'test1',
            data: [
                10, 22, 28, 30,
            ]
        },{
    
            name: '实际开始时间2',
            type: 'bar',
            stack: 'test',
            itemStyle: {
    
                normal: {
    
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                5, 18, 24, 26
            ]
        },
        {
    
            name: '实际完成时间2',
            type: 'bar',
            stack: 'test',
            data: [
                10, 22, 28, 30,
            ]
        }
    ]
};]
ganttChart.setOption(opt2);
</script>

结果图如下所示：
echart实现甘特图
看起来确实有那么回事，但是，首先横坐标不是时间，而是一些int型的数值，我在编程时试了type改成time，然后赋Date类型的数据，虽然可以显示，但是有Bug，当横坐标是Date类型时，柱状图都是从头开始显示，即紧贴y轴开始显示，不能从不同起点开始显示，原因还没有找到。而且数据赋值的一大弊端，就是，同一行的数据不可能有交叉的部分，这在绘制计划甘特图与实际甘特图时，就会有麻烦。所以，我们不推荐采用这种方法，而是用下面的方法。

2.2 通过甘特图js包绘制

我也是从师兄的代码知道的，竟然还有专门的甘特图js包，太强了吧……
首先，我们先下载这个js包，下载链接：Stacked Horizontal Gantt Chart Plugin With jQuery
下载完成后，我们在html中引入：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
    <style>
      body {
    
        font-family: Roboto, Times
      }
      h1 {
    
        display: inline-block;
      }

最低0.47元/天解锁文章

CodeSausage

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
9
评论
echart绘表和甘特图实现

echart绘曲线图和甘特图实现今天，我们来总结一下，如何在网页上实现曲线图的绘制，以及甘特图的绘制。1. echart实现绘制曲线图一开始，我想到的解决办法，不是用echart绘曲线图，而是用matplotlib绘制，这种办法的思路，就是在后台将数据通过matplotlib.pyplo绘制得到折线图，然后将图片保存到本地，再通过前端，将图片显示在网页上，效果其实也还可以，就像下图一样：...
复制链接

扫一扫