echart四象图图demo

最新推荐文章于 2025-06-06 11:33:20 发布

郑嘉文

最新推荐文章于 2025-06-06 11:33:20 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts图表文章标签：前端 echarts

本文链接：https://blog.youkuaiyun.com/secretkevin/article/details/126005719

echarts图表专栏收录该内容

1 篇文章

订阅专栏

该博客展示了如何使用ECharts库创建一个包含两条平滑折线的四象限图表。配置包括x轴和y轴的范围、刻度、标签、箭头符号，以及数据平移视图功能。此外，还设置了数据标签显示，当数据点位于序列末尾时，会显示序列名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
}
]
};