黄河某站五千年一遇洪峰流量频率图echarts 折线配置项内容和展示
配置项如下
var dataPoint = [
[-1.88950996,5600],
[-1.564726471,4080],
[-1.35170224,4070],
[-1.186831433,4020],
[-1.049131398,4000],
[-0.928899492,3870],
[-0.820792088,3850],
[-0.721522284,3720],
[-0.628904218,3530],
[-0.541395085,3470],
[-0.457851931,3220],
[-0.377391944,3120],
[-0.29930691,3090],
[-0.223007831,2910],
[-0.14798711,2800],
[-0.073791274,2780],
[-1.39214E-16,2660],
[0.073791274,2500],
[0.14798711,2490],
[0.223007831,2480],
[0.29930691,2370],
[0.377391944,2340],
[0.457851931,2300],
[0.541395085,2280],
[0.628904218,2270],
[0.721522284,2200],
[0.820792088,2150],
[0.928899492,2070],
[1.049131398,2070],
[1.186831433,2030],
[1.35170224,1960],
[1.564726471,1740],
[1.88950996,1330]
];
var dataLine = [
[-3.719016485,10106.99279],
[-3.090232306,8285.918114],
[-2.878161739,7726.23158],
[-2.326347874,6396.203995],
[-2.053748911,5805.310701],
[-1.644853627,4998.986633],
[-1.281551566,4361.118632],
[-0.67448975,3453.675741],
[-1.39214E-16,2663.925529],
[0.67448975,2082.43132],
[1.281551566,1714.057686],
[1.644853627,1553.485525],
[2.053748911,1417.785225],
[2.326347874,1349.800949],
[2.878161739,1255.739574],
[3.090232306,1231.829146],
[3.719016485,1188.218145],
];
var dataX1 = [{
xAxis: 3.719469532,
label: {
normal: {
formatter: '99.99'
}
}
}, {
xAxis: 3.290479071,
label: {
normal: {
formatter: '99.95'
}
}
}, {
xAxis: 3.090244718,
label: {
normal: {
formatter: '99.9'
}
}
}, {
xAxis: 2.878150553,
label: {
normal: {
formatter: '99.8'
}
}
}, {
xAxis: 2.575834515,
label: {
normal: {
formatter: '99.5'
}
}
}, {
xAxis: 2.326341928,
label: {
normal: {
formatter: '99'
}
}
}, {
xAxis: 2.053748176,
label: {
normal: {
formatter: '98'
}
}
}, {
xAxis: 1.644853,
label: {
normal: {
formatter: '95'
}
}
}, {
xAxis: 1.281550794,
label: {
normal: {
formatter: '90'
}
}
}, {
xAxis: 0.841621386,
label: {
normal: {
formatter: '80'
}
}
}, {
xAxis: 0.524401003,
label: {
normal: {
formatter: '70'
}
}
}, {
xAxis: 0.25334657,
label: {
normal: {
formatter: '60'
}
}
}, {
xAxis: 0,
label: {
normal: {
formatter: '50'
}
}
}, {
xAxis: -0.25334657,
label: {
normal: {
formatter: '40'
}
}
}, {
xAxis: -0.524401003,
label: {
normal: {
formatter: '30'
}
}
}, {
xAxis: -0.841621386,
label: {
normal: {
formatter: '20'
}
}
}, {
xAxis: -1.281550794,
label: {
normal: {
formatter: '10'
}
}
}, {
xAxis: -1.644853,
label: {
normal: {
formatter: '5'
}
}
}, {
xAxis: -2.053748176,
label: {
normal: {
formatter: '2'
}
}
}, {
xAxis: -2.326341928,
label: {
normal: {
formatter: '1'
}
}
}, {
xAxis: -2.575834515,
label: {
normal: {
formatter: '0.5'
}
}
}, {
xAxis: -2.878150553,
label: {
normal: {
formatter: '0.2'
}
}
}, {
xAxis: -3.090244718,
label: {
normal: {
formatter: '0.1'
}
}
}, {
xAxis: -3.290479071,
label: {
normal: {
formatter: '0.05'
}
}
}, {
xAxis: -3.719469532,
label: {
normal: {
formatter: '0.01'
}
}
}],
dataX2 = [{
xAxis: 3.540189937
}, {
xAxis: 3.431923687
}, {
xAxis: 3.352761269
}, {
xAxis: 3.238965292
}, {
xAxis: 3.194727469
}, {
xAxis: 3.156019375
}, {
xAxis: 3.121385816
}, {
xAxis: 2.967717592
}, {
xAxis: 2.747765393
}, {
xAxis: 2.65208655
}, {
xAxis: 2.512133506
}, {
xAxis: 2.457272785
}, {
xAxis: 2.408924047
}, {
xAxis: 2.365613909
}, {
xAxis: 2.365613909
}, {
xAxis: 2.257129381
}, {
xAxis: 2.19728463
}, {
xAxis: 2.144406608
}, {
xAxis: 2.096930984
}, {
xAxis: 1.880789569
}, {
xAxis: 1.750686351
}, {
xAxis: 1.554772098
}, {
xAxis: 1.475791578
}, {
xAxis: 1.405073817
}, {
xAxis: 1.340754352
}, {
xAxis: 1.22652863865369
}
, {
xAxis: 1.17498757390422
}
, {
xAxis: 1.12639099825173
}
, {
xAxis: 1.08032054413343
}
, {
xAxis: 1.03643287729938
}
, {
xAxis: 0.994457423075801
}
, {
xAxis: 0.954164534050506
}
, {
xAxis: 0.915365490072872
}
, {
xAxis: 0.877896582096582
}
, {
xAxis: 0.772192834119778
}
, {
xAxis: 0.706302216713084
}
, {
xAxis: 0.643344719719607
}
, {
xAxis: 0.582840584684163
}
, {
xAxis: 0.467698555439711
}
, {
xAxis: 0.412462668464286
}
, {
xAxis: 0.358459146809764
}
, {
xAxis: 0.305481080431491
}
, {
xAxis: 0.201894181373063
}
, {
xAxis: 0.150969299284043
}
, {
xAxis: 0.10043322618003
}
, {
xAxis: 0.0501540853292681
}
, {
xAxis: -0.0501540853292681
}
, {
xAxis: -0.10043322618003
}
, {
xAxis: -0.150969299284043
}
, {
xAxis: -0.201894181373063
}
, {
xAxis: -0.305481080431491
}
, {
xAxis: -0.358459146809764
}
, {
xAxis: -0.412462668464286
}
, {
xAxis: -0.467698555439711
}
, {
xAxis: -0.582840584684163
}
, {
xAxis: -0.643344719719607
}
, {
xAxis: -0.706302216713084
}
, {
xAxis: -0.772192834119778
}
, {
xAxis: -0.877896582096582
}
, {
xAxis: -0.915365490072872
}
, {
xAxis: -0.954164534050506
}
, {
xAxis: -0.994457423075801
}
, {
xAxis: -1.03643287729938
}
, {
xAxis: -1.08032054413343
}
, {
xAxis: -1.12639099825173
}
, {
xAxis: -1.17498757390422
}
, {
xAxis: -1.22652863865369
}
, {
xAxis: -1.34075435198611
}
, {
xAxis: -1.40507381729549
}
, {
xAxis: -1.47579157783184
}
, {
xAxis: -1.5547720977338
}
, {
xAxis: -1.7506863514427
}
, {
xAxis: -1.88078956853133
}
, {
xAxis: -2.09693098440766
}
, {
xAxis: -2.14440660784021
}
, {
xAxis: -2.19728462980128
}
, {
xAxis: -2.25712938117794
}
, {
xAxis: -2.36561390920542
}
, {
xAxis: -2.40892404690384
}
, {
xAxis: -2.45727278525009
}
, {
xAxis: -2.51213350566104
}
, {
xAxis: -2.65208655036985
}
, {
xAxis: -2.74776539299637
}
, {
xAxis: -2.96771759167313
}
, {
xAxis: -3.12138581648468
}
, {
xAxis: -3.1560193747282
}
, {
xAxis: -3.19472746923565
}
, {
xAxis: -3.23896529152989
}
, {
xAxis: -3.35276126861572
}
, {
xAxis: -3.43192368745803
}
, {
xAxis: -3.54018993675708
}
];
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0,0.5)'
}
};
var color=['#c23531','#fec42c','#68228B'];
var option = {
backgroundColor: '#404a59',
color: [
//'#dd4444', '#fec42c', '#80F1BE'
'#80F1BE','rgba(128, 128, 128, 0.5)','#c23531','#fec42c',
],
title:{
text:'黄河某站五千年一遇洪峰流量频率图',
textStyle:{
color:'#fff',
fontStyle:'oblique',
},
},
legend: {
y: 'top',
data: ['点',
'线', 't', 'x'
],
textStyle: {
color: '#fff',
fontSize: 16
}
},
grid: {
},
xAxis: {
type: 'value',
name: '频率 %',
nameGap: 16,
nameTextStyle: {
color: '#fff',
fontSize: 14
},
min: -3.72,
max: 3.72,
splitLine: {
show: false
},
axisLabel: { //轴标签
show: false //不显示
},
axisTick: { //轴刻度
show: false //不显示
},
axisLine: { //轴线
lineStyle: { //样式
color: '#eee'//颜色
}
}
},
yAxis: {
type: 'value',
name: '流量m³/s',
nameLocation: 'end',
nameGap: 20,
position: 'left',
offset: 3,
scale: true,
nameTextStyle: {
color: '#fff',
fontSize: 16
},
axisLine: {
onZero: false,
lineStyle: {
color: '#eee'
}
},
splitLine: {
show: true,
lineStyle:{
color:'#ddd'
}
}
},
series: [ {
name: 't',
type: 'line',
markLine: {
symbol: ['none', 'none'],
silent: true,
label: {
normal: {
position: "start"
}
},
data: dataX1
}
}, {
name: 'x',
type: 'line',
lineStyle: {
normal: {
color: 'rgba(128, 128, 128, 0.1)'
}
},
markLine: {
symbol: ['none', 'none'],
silent: true,
label: {
normal: {
show: false,
position: "start"
}
},
data: dataX2
}
},
{
name: '点',
type: 'scatter',
itemStyle: itemStyle,
data: dataPoint
}, {
name: '线',
type: 'line',
lineStyle:{
normal:{
color:color[2]
}
},
data: dataLine
},
]
};
截图如下
