echart四象图图demo

该博客展示了如何使用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,
}
]
};

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值