Calculation/app/view/measure/stage.ejs

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div>
            </div>
            <div>
                <a href="#add-qi" data-toggle="modal" data-target="#add-qi" class="btn btn-primary btn-sm pull-right">添加期</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <!--期汇总图表-->
            <div id="chartContainer4" style="height: 300px; width: 100%;" class="mb-4">
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>期数</th>
                    <th class="text-center">计量月份</th>
                    <th class="text-center">本期合同计量</th>
                    <th class="text-center">本期数量变更计量</th>
                    <th class="text-center">截止上期累计完成</th>
                    <th class="text-center">本期完成计量</th>
                    <th class="text-center">累计完成计量</th>
                    <th class="text-center">状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><a href="jiliang-qi-detail.html">第 4 期</a></td>
                    <td class="text-center">201710</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-cenetr">待上报</td>
                </tr>
                <tr>
                    <td><a href="jiliang-qi-detail.html">第 3 期</a></td>
                    <td class="text-center">201710</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-cenetr"><a href="" class="btn btn-primary btn-sm">审批</a></td>
                </tr>
                <tr>
                    <td><a href="jiliang-qi-detail.html">第 2 期</a></td>
                    <td class="text-center">201710</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-cenetr text-warning">审批中</td>
                </tr>
                <tr>
                    <td><a href="jiliang-qi-detail.html">第 1 期</a></td>
                    <td class="text-center">201710</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-right">34234234.00</td>
                    <td class="text-cenetr text-success">审批完成</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src=/public/js/echarts/echarts.min.js></script>
<script type="text/javascript">
    //4 标段期数计量进度//
    var myChart = echarts.init(document.getElementById('chartContainer4'));
    var option = {
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
        },
        dataZoom: [
            {show: true,start: 0, end: 100}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'完成度',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : true}
            }
        ],
        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);
    //4 标段期数计量进度//

</script>