Calculation/app/view/tender/detail.ejs

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div>
                <div class="btn-group">
                    <a href="/tender">返回 </a>
                </div>
            </div>
            <div>
                <a href="#add-bd" data-toggle="modal" data-target="#save-bd" class="btn btn-outline-primary btn-sm">编辑</a> <a href="#del-bd" data-toggle="modal" data-target="#del-bd" class="btn btn-outline-danger btn-sm">删除</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <table class="table table-bordered table-sm">
                <thead><th width="300">名称</th><th width="120">标段类型</th><th width="120">审批状态</th><th width="120">创建时间</th><th>计量进度</th></thead>
                <tr><td><%= tenderInfo.name %></td>
                    <td><%= tenderConst.typeString[tenderInfo.type] %></td>
                    <td><%= tenderConst.statusString[tenderInfo.status] %></td>
                    <td><%= tenderInfo.create_time > 0 ? moment(tenderInfo.create_time * 1000).format('YYYY-MM-DD') : '-' %></td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar bg-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止本期累计完成：￥731,121,121.00">45%</div>
                            <div class="progress-bar bg-info" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
                            <div class="progress-bar bg-gray" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-bordered table-sm">
                <thead>
                <th width="120">计量期数</th>
                <th>0号台帐合同</th>
                <th>本期完成</th>
                <th>截止本期合同</th>
                <th>截止本期变更</th>
                <th>截止本期完成</th>
                <th>截止上期完成</th>
                <th>本期应付</th>
                </thead>
                <tr>
                    <td>15 <a href="jiliang-qi.html" target="_balnk"><i class="fa fa-ellipsis-h"></i></a></td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
            </table>
            <!--图表1-->
            <div id="chartContainer1" style="height: 400px; width: 100%;" class="mt-5">
            </div>
            <!--图表3-->
            <div id="chartContainer3" style="height: 400px; width: 100%;" class="mt-5">
            </div>
            <!--图表2-->
            <div id="chartContainer2" style="height: 600px; width: 100%;">
            </div>
        </div>
    </div>
</div>
<script src=/public/js/echarts/echarts.min.js></script>
<script type="text/javascript">
    //1 标段期数计量进度//
    var myChart = echarts.init(document.getElementById('chartContainer1'));
    var option = {
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                  title : {
            text: '期进度',
            x:'left'
        },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
        },
        dataZoom : {
            show : true,
            start :0,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show :true},
                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left',
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'完成度',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitLine : {show :false},
                splitArea : {show : false}
            }
        ],
        series : [
            {
                name:'本期合同计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '合同',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'本期数量变更计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '合同',
                data:[320, -20, 301, 334, 390, 330, 320]
            },
            {
                name:'截至上期累计完成',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'本期完成计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'完成度',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[10, 15, 20, 13, 11, 9, 5]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //1 标段期数计量进度//
    //2 期数组成//
    var myChart = echarts.init(document.getElementById('chartContainer2'));
    var option = {
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        title : {
            text: '期完成占比',
            x:'left'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b}：{c} 元<br>占标段：{d} %"
        },
        calculable : true,
        series : [
            {
                name:'标段计量分布',
                type:'pie',
                radius : '80%',
                center: ['50%','50%'],
                data:[
                    {value:7814964.00, name:'第一期'},
                    {value:6043186.10, name:'第二期'},
                    {value:6917475.00, name:'第三期'},
                    {value:7634982.00, name:'第四期'},
                    {value:7634982.00, name:'第五期'},
                    {value:7634982.00, name:'第六期'},
                    {value:7634982.00, name:'第七期'}
                ]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //2 期数组成//
    //3 标段计量分布//
    var myChart = echarts.init(document.getElementById('chartContainer3'));
    var option = {
        color:['#ff6666','#3cb371'],
        title : {
            text: '期月进度'
        },
        tooltip : {
            trigger: 'axis',
            formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
        },
        legend: {
            data:['累计完成','本月完成']
        },
        dataZoom : {
            show : true,
            start :50,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : [
                    '2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09'
                ]
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} %'
                },
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'累计完成',
                type:'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
            },
            {
                name:'本月完成',
                type:'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
            }
        ]
    };


    // 为echarts对象加载数据
    myChart.setOption(option);
    //3 标段计量分布//
</script>