逾期存量

描述:当前是关于Echarts图表中的 折线图 示例。
 
                    option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                formatter: function(params, ticket, callback) {
                    var tp = params[0].name;
                    params.forEach(function(param) {
                        if (param.value > 0) {
                            tp += '<br/>' + param.seriesName + ':' + param.value.toFixed(1);
                        }
                    });
                    return tp;
                }
            },
            legend: {
                data: [{
                        name: '未到期存量',
                        icon: 'circle',
                    },
                    {
                        name: '逾期存量',
                        icon: 'circle',
                    },
                    {
                        name: '预测存量',
                        icon: 'circle',
                    },
                ]
            },
            grid: {
                left: '0',
                right: '50px',
                bottom: '0',
                containLabel: true
            },
            toolbox: {
                feature: {},
                right: '50px',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    '2018-02-05', '2018-02-06', '2018-02-07',
                    '2018-02-08', '2018-02-09', '2018-02-10',
                    '2018-02-11', '2018-02-12', '2018-02-13',
                    '2018-02-14', '2018-02-15', '2018-02-16',
                    '2018-02-17', '2018-02-18', '2018-02-19', '2018-02-20',
                    '2018-02-21', '2018-02-22', '2018-02-23',
                    '2018-02-24', '2018-02-25', '2018-02-26', '2018-02-27',
                    '2018-02-28', '2018-03-01', '2018-03-02',
                    '2018-03-03', '2018-03-04', '2018-03-05', '2018-03-06',
                    '2018-03-07', '2018-03-08', '2018-03-09',
                    '2018-03-10', '2018-03-11', '2018-03-12', '2018-03-13',
                    '2018-03-14', '2018-03-15', '2018-03-16',
                    '2018-03-17', '2018-03-18', '2018-03-19', '2018-03-20'
                ],
                //name: '放款时间',
                nameLocation: 'end',
                axisLine: {
                    symbol: 'none',
                    symbolSize: [6, 10],
                },
                axisPointer: {
                    show: true,
                    type: 'line',
                    lineStyle: {
                        width: 1,
                    },
                    label: {
                        show: false,
                    }
                },
                axisTick: {
                    interval: function(index, value) {
                        var step = 5;
                        var len = [
                            '2018-02-05', '2018-02-06', '2018-02-07',
                            '2018-02-08', '2018-02-09', '2018-02-10',
                            '2018-02-11', '2018-02-12', '2018-02-13',
                            '2018-02-14', '2018-02-15', '2018-02-16',
                            '2018-02-17', '2018-02-18', '2018-02-19', '2018-02-20',
                            '2018-02-21', '2018-02-22', '2018-02-23',
                            '2018-02-24', '2018-02-25', '2018-02-26', '2018-02-27',
                            '2018-02-28', '2018-03-01', '2018-03-02',
                            '2018-03-03', '2018-03-04', '2018-03-05', '2018-03-06',
                            '2018-03-07', '2018-03-08', '2018-03-09',
                            '2018-03-10', '2018-03-11', '2018-03-12', '2018-03-13',
                            '2018-03-14', '2018-03-15', '2018-03-16',
                            '2018-03-17', '2018-03-18', '2018-03-19', '2018-03-20'
                        ].length - 1;
                        return index % step == len % step;
                    },
                },
                axisLabel: {
                    interval: function(index, value) {
                        var step = 5;
                        var len = [
                            '2018-02-05', '2018-02-06', '2018-02-07',
                            '2018-02-08', '2018-02-09', '2018-02-10',
                            '2018-02-11', '2018-02-12', '2018-02-13',
                            '2018-02-14', '2018-02-15', '2018-02-16',
                            '2018-02-17', '2018-02-18', '2018-02-19', '2018-02-20',
                            '2018-02-21', '2018-02-22', '2018-02-23',
                            '2018-02-24', '2018-02-25', '2018-02-26', '2018-02-27',
                            '2018-02-28', '2018-03-01', '2018-03-02',
                            '2018-03-03', '2018-03-04', '2018-03-05', '2018-03-06',
                            '2018-03-07', '2018-03-08', '2018-03-09',
                            '2018-03-10', '2018-03-11', '2018-03-12', '2018-03-13',
                            '2018-03-14', '2018-03-15', '2018-03-16',
                            '2018-03-17', '2018-03-18', '2018-03-19', '2018-03-20'
                        ].length - 1;
                        return index % step == len % step;
                    },
                    formatter: function(value, index) {
                        var l = value.slice(-5);
                        return l;
                    }
                }

            },
            yAxis: {
                type: 'value',
                min: 0,
                //name: '单位(千元)',
                axisLabel: {
                    formatter: '{value}',
                },
                splitLine: false,
                axisPointer: {
                    show: false,
                }
            },
            series: [{
                    name: '未到期存量',
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(196, 215, 155)',
                            }, {
                                offset: 1,
                                color: 'rgb(196, 215, 155)',
                            }])
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(196, 215, 155)',
                            lineStyle: {
                                color: 'rgb(196, 215, 155)',
                            }
                        }
                    },
                    //smooth: true,
                    //smoothMonotone:'none',
                    stack: 'stack',
                    data: [
                        337636.28,
                        344959.9,
                        355022.35, 365948.66, 376728, 372785.8,
                        369154.64, 372571.12, 380872.6, 389395.51,
                        386331.8, 383214.21, 379242.15,
                        375959.78, 372350.15,
                        367153.31, 361312.84, 360199.39,
                        350389.26, 341107.15, 333858.41, 325287.75,
                        314569.33, 292041.7, 293643.41,
                        297970.35, 293158.37,
                        289739.38, 284965.44, 289851.51,
                        323711.85 - 26100.43,
                        null, null, null, null, null, null, null, null, null, null, null, null, null
                    ],
                    markPoint: {
                        symbolSize: 96,
                        data: [{
                            name: '',
                            value: '297611.4',
                            coord: [30, 297611.4],
                        }]
                    },
                },
                {
                    name: '逾期存量',
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(239, 162, 7)',
                            }, {
                                offset: 1,
                                color: 'rgb(239, 162, 7)',
                            }])
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(239, 162, 7)',
                            lineStyle: {
                                color: 'rgb(239, 162, 7)',
                            }
                        }
                    },
                    //smooth: true,
                    stack: 'stack',
                    data: [21790.6, 21469.46, 21740.43, 21760.49,
                        21734.37, 21749.6, 21615.71, 21301.5,
                        21655.92, 21926.74, 22020.29,
                        22308.8, 22875.44, 23081.04, 23203.79, 23776.04,
                        24120.1, 24499.76, 25457.82, 26281.9, 26113.25,
                        25953.19, 25971.63, 29249.78,
                        29148.16, 29556.13, 28947.3,
                        26830.31, 25960.02, 26100.43,
                        26100.43,
                        null, null, null, null, null, null, null, null, null, null, null, null, null
                    ],
                    markPoint: {
                        symbolSize: 96,
                        data: [{
                            name: '',
                            value: '323711.8',
                            coord: [30, 323711.8],
                        }]
                    },
                },
                {
                    name: '预测存量',
                    type: 'line',
                    itemStyle: {
                        color: 'rgb(0, 95, 191)',
                    },
                    lineStyle: {
                        color: 'rgb(0, 95, 191)',
                        opacity: 0.5,
                    },
                    //smooth: true,

                    data: [null, null, null, null, null, null, null,
                        null, null, null, null, null, null, null, null,
                        null, null, null, null, null, null, null,
                        null, null, null, null, null, null, null,
                        null,
                        323711.85,
                        332147.71, 340444.27, 334710.11, 329462.19, 323842.31, 332300.19, 340589.27, 351202.82, 362013.71, 356570.32, 351530.8, 346641.28, 357149.42
                    ],
                    markLine: {
                        symbol: 'pin',
                        symbolSize: '0',
                        data: [{
                            xAxis: 30,
                            name: '实际 03-07 预测',
                            label: {
                                normal: {
                                    formatter: function(v) {
                                        return v.data.name;
                                    }
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#ff4500',
                                    type: 'dotted',
                                }
                            }
                        }, ]
                    },
                    markPoint: {
                        symbolSize: 96,
                        data: [{
                            name: '',
                            value: '357149.4',
                            coord: [43, 357149.4],
                        }]
                    },
                    /*
                    markArea: {
                        silent: false,
                        label: {
                            //position:['insideTop'],
                            color: '#000',
                        },
                        data: [
                            [{
                                name: '实际',
                                coord:[1,0],
                                itemStyle: {
                                    color: 'rgb(239, 239, 239)',
                                    opacity: 1,
                                },
                            }, {
                                coord:[30,500000],
                            }],
                            [{
                                name: '预测',
                                coord:[30,0],
                                itemStyle: {
                                    color: 'rgb(239, 239, 239)',
                                },
                            }, {
                                coord:[44,500000],
                            }]
                        ]
                    },
                    */
                },
            ]
        };