const config = new Map([
[‘line-1’, {
name: ‘line-1’,
data: [[10, -0.1], [20, 0], [40, 0.5], [50, 0.6], [80, 1]]
}],
[‘line-2’, {
name: ‘line-2’,
data: [[10, -0.2], [20, 0.1], [40, 0.6], [50, 0.7], [80, 0.8]]
}],
])
const percent = (val, decimal, mark = ‘’) => {
let result = ‘’
if (val !== null && typeof val === ‘number’) {
result = (val * 100).toFixed(2) + ‘%’
}
return result
}
option = {
animation: false,
grid: {
top: 40,
left: 50,
right: 40,
bottom: 50
},
tooltip: {
trigger: ‘axis’,
formatter: (val) => {
let result = ‘’
if (val && val.length > 0) {
val.forEach(item => {
const { marker, value } = item
const x = value[0]
const y = value[1]
result += ${marker}x: ${x}, y: ${percent(y,2,'-')}<br/>
})
}
return result
debugger
}
},
xAxis: {
name: ‘x’,
min:0,
max: 100,
splitNumber: 20,
splitLine:{
show:false
},
axisTick: {
show: false
},
axisLine: {
symbol:[‘none’,‘arrow’]
},
offset: -350,
},
yAxis: {
name: ‘y’,
min: -1,
max: 1,
axisLabel: {
formatter: (val) => {
let result = ‘’
if (val && typeof val === ‘number’) {
result = (val * 100).toFixed(2) + ‘%’
}
return result
}
},
splitNumber: 20,
splitLine:{
show:false
},
axisTick: {
show: false
},
axisLine: {
symbol:[‘none’,‘arrow’]
},
offset: -505
},
dataZoom: [
{
show: true,
type: ‘inside’,
filterMode: ‘none’,
xAxisIndex: [0],
startValue: 0,
endValue: 100
},
{
show: true,
type: ‘inside’,
filterMode: ‘none’,
yAxisIndex: [0],
startValue: -1,
endValue: 1
}
],
series: [
{
name: ‘line-1’,
type: ‘line’,
smooth: true,
label: {
show: true,
position: ‘bottom’,
formatter: (val) => {
let result = ‘’
const { seriesName, dataIndex } = val
const length = config.get(seriesName).data.length
if (dataIndex === length - 1) {
result = seriesName
}
return result
}
},
data: config.get(‘line-1’).data,
},
{
name: ‘line-2’,
type: ‘line’,
smooth: true,
label: {
show: true,
position: ‘bottom’,
formatter: (val) => {
let result = ‘’
const { seriesName, dataIndex } = val
const length = config.get(seriesName).data.length
if (dataIndex === length - 1) {
result = seriesName
}
return result
}
},
data: config.get(‘line-2’).data,
}
]
};