逾期存量echarts category配置项内容和展示
配置项如下
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],
}]
]
},
*/
},
]
};
截图如下
