const jhhsw = 44.22
const sjhsw = 42.60
const swLevel = 41.75;
const yAxisMin = 19
const damOutline = [
[0, 35],
[7.97, 42.4],
[11.25, 42.4],
[21.05, 46.5],
[40.27, 46.5],
[45.79, 42.4],
[65, 35]
];
const jingList = [
{ name: '#1', value: [30, 46.5], deep: 30 },
{ name: '#2', value: [50, 41], deep: 20 }
];
const jingSwData = [
[30, 35],
[50, 29],
];
let swInterval = [];
let swLineEndX = null;
const damX = damOutline.map(point => point[0]);
const damY = damOutline.map(point => point[1]);
for (let i = 0; i < damOutline.length; i++) {
const x = damOutline[i][0];
const y = damOutline[i][1];
if (y === swLevel) {
swInterval = [x, y];
break;
} else if (i === 0 && y > swLevel) {
swInterval = [x, y];
} else if (i > 0 && swInterval.length === 0) {
const preDamOutline = damOutline[i - 1];
if (y > swLevel && swLevel > preDamOutline[1]) {
swInterval = [preDamOutline, [x, y]];
}
}
}
if (swInterval.length === 1) {
const [x, y] = swInterval[0];
swLineEndX = (y === swLevel) ? x : 0;
} else if (swInterval.length === 2) {
const [x1, y1] = swInterval[0];
const [x2, y2] = swInterval[1];
swLineEndX = (swLevel - y1) * (x2 - x1) / (y2 - y1) + x1;
} else {
const damYMax = Math.max(...damY)
if(swLevel >= damYMax){
swLineEndX = damX.length > 0 ? damX[damX.length - 1] : null
}
}
const swList = [
{
value: [0, swLevel],
label: {
show: true,
position: ['20px', '-30px'],
distance: 10,
fontSize: 14,
lineHeight: 16,
color: "#000",
formatter: '当前水位\n{@[1]}(m)'
}
},
[swLineEndX, swLevel]
];
const jingSwX = jingSwData.map(point => point[0]);
const jingSwY = jingSwData.map(point => point[1]);
if(Math.min(...jingSwY) > 0){
jingSwData.push({
value: [Math.max(...jingSwX) + 10, 0],
label: {
show: false
}
})
}
const jingSwCurveData = [
[0, swLevel],
[swLineEndX, swLevel],
].concat(jingSwData);
const damXMax = Math.max(...damX)
const svg = 'M136.71078,90.7149424 C135.038663,90.084817 133.319214,89.8204828 131.637995,89.8987366 C131.93792,88.5693311 132.022117,87.2371959 131.901965,85.9319035 C131.475516,81.1970909 128.414369,76.8944942 123.681104,75.0882862 C118.812669,73.2488659 113.532803,74.556888 110.072058,78.0014222 C111.44425,78.0132512 112.836467,78.2716709 114.184082,78.7876003 C120.385569,81.1311211 123.498145,88.0593162 121.156545,94.2582038 C120.289538,96.5421242 118.80038,98.4052027 116.960324,99.7405227 C113.796773,102.011704 109.591905,102.714169 105.683776,101.228711 C99.4827445,98.8915594 96.3669821,91.9606345 98.7113134,85.7581072 C99.0176102,84.9537305 99.4044636,84.2007647 99.8609505,83.4869258 L99.8545788,83.4869258 C99.8545788,83.4869258 99.8545788,83.4869258 99.8545788,83.4932953 C101.850742,80.3754255 103.561544,76.9968612 104.927364,73.3990041 C115.528966,45.4164295 101.427934,14.127175 73.4261234,3.52605368 C45.4215819,-7.07142797 14.1333382,7.02472855 3.52900521,35.0104878 C0.629425582,42.6470623 -0.42099504,50.523403 0.149272308,58.1686218 C0.16110547,58.4206719 0.185226914,58.6786366 0.209348358,58.9366014 C2.47266801,84.9182432 19.2184117,108.595036 45.2413538,118.442737 C71.7121355,128.45559 100.448968,121.413198 119.352898,102.762395 C122.585626,99.6263266 127.465895,98.4657129 131.950208,100.160455 C137.34704,102.203699 140.39954,107.712861 139.559386,113.191995 C141.579216,111.769777 143.215378,109.750646 144.163851,107.256987 C146.676122,100.628613 143.33553,93.2204304 136.71078,90.7149424 ZZ';
let option = {
backgroundColor: '#fff',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
top: 40,
left: 10,
right: 100,
bottom: 10,
containLabel: true,
},
xAxis: [
{
type: "value",
data: damX,
axisTick: {
show: false,
alignWithLabel: true,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
max: damXMax,
},
],
yAxis: [
{
type: "value",
name: "断面高程(m)",
type: "value",
nameTextStyle: {
color: "#000",
fontSize: 12,
align: "center",
padding: [0, 28, 0, 0],
},
axisLabel: {
formatter: "{value}",
color: "rgba(95, 187, 235, 1)",
textStyle: {
fontSize: 14,
color: "#000",
lineHeight: 16,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false
},
max: 70,
min: yAxisMin
},
{
name: "",
type: "value",
nameTextStyle: {
color: "#000",
fontSize: 12,
align: "center",
padding: [0, 0, 0, 25],
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name:"大坝轮廓",
type:'line',
symbol: "none",
data: damOutline,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(245,238,188,1)',
}, {
offset: 1, color: 'rgba(161,152,37,1)',
}],
globalCoord: false // 缺省为 false
},
opacity: 1
}
},
lineStyle: {
width: 0
},
tooltip: {
show: false
},
z: 1
},
{
name:"水位",
type:'line',
symbolSize: 0,
data: swList,
areaStyle: {
normal: {
color: 'rgba(71,182,238,0.9)',
opacity: 1
},
},
lineStyle: {
width: 0
},
tooltip: {
show: false
},
z: 0
},
{
type: 'line',
markLine: {
symbol: 'none',
label: {
show: true,
position: 'end',
formatter: '校核洪水位 {c}',
color: '#eb4747',
fontSize: 12,
lineHeight: 14,
},
lineStyle: {
type: 'dashed',
color: '#eb4747',
width: 1,
},
data: [
{
name: '刻度标线',
yAxis: jhhsw,
},
]
},
tooltip: {
show: false
},
},
{
type: 'line',
markLine: {
symbol: 'none',
label: {
show: true,
position: 'end',
formatter: '设计洪水位 {c}',
color: '#E817F2',
fontSize: 12,
lineHeight: 14,
},
lineStyle: {
type: 'dashed',
color: '#E817F2',
width: 1,
},
data: [
{
name: '刻度标线',
yAxis: sjhsw,
},
]
},
tooltip: {
show: false
},
},
{
name: "井",
type: "bar",
itemStyle: {
color: "#fff"
},
barWidth: 10,
data: jingList,
z: 2,
silent: true,
tooltip: {
show: false
},
label: {
show: true,
position: "insideBottomRight",
offset: [-10, 0],
fontSize: 20,
color: "#000",
formatter: '{b}'
},
},
{
name: "井-深度",
type: "bar",
itemStyle: {
color: "transparent"
},
barWidth: 10,
data: jingList,
z: 2,
silent: true,
tooltip: {
show: false
},
label: {
show: true,
position: "insideTopRight",
offset: [-10, 5],
fontSize: 14,
color: "#E39B0A",
formatter: function (params) {
const data = params.data || {};
return data.deep != null ? ('深度 ' + data.deep + '(m)') : '' ;
},
},
},
{
name: "井水位",
type: "bar",
itemStyle: {
color: '#79C4F0',
decal: {
dashArrayX: [
[5, 5],
[0, 5, 5, 0]
],
dashArrayY: [10, 0],
symbol: 'path://' + svg
},
},
barWidth: 10,
barGap: "-99%",
data: jingSwData,
label: {
show: true,
position: "top",
distance: 10,
fontSize: 20,
color: "#000",
formatter: '{@[1]}(m)',
},
silent: true,
tooltip: {
show: false
},
z: 3
},
{
name: '井水位曲线',
data: jingSwCurveData,
type: 'line',
symbol: "none",
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 0
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(71,182,238, 0.1)'
},
{
offset: 1,
color: 'rgba(71,182,238, 0.8)'
}
])
}
}
},
}
],
};