# ECharts自定义Y轴间隔刻度，不均分配

1 篇文章 0 订阅

### 问题图表

https://echarts.apache.org/examples/zh/editor.html?c=area-stack

### 代码

//数据1
const emailData = [12, 13, 10, 34, 90, 130, 210];
//数据2
const adsData = [2200, 3300,1241,11232, 2900, 3300, 11310];
//数据3
const ssData = [10000, 5,121,832, 40, 6233, 310];
//x轴
const xzhou = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//定义数据间隔
const dataInterval = [0, 10, 30, 50, 200, 1000, 5000, 12000];

const emailData2 = [];
for (var i = 0; i < emailData.length; i++) {
//console.log(emailData[i])
// 1.寻找在数据间隔里小于emailData的最大值
const min_v = Math.max(...dataInterval.filter((v) => v <= emailData[i]));
//console.log(emailData[i] + '-' + min_v);
// 2.寻找在数据间隔里大于emailData的最小值
const max_v = Math.min(...dataInterval.filter((v) => v > emailData[i]));
//console.log(emailData[i] + '--' + max_v);
//  3.寻找 min_v 所在的下标
const index = dataInterval.findIndex((v) => v === min_v);
//console.log(emailData[i] + '---' + index);
//  4.计算该amount在y轴上应该展示的位置
const y_value = ((emailData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
//console.log(emailData[i] + '----' + y_value);
emailData2[i] = y_value;
}
//console.log(emailData2);

for (var i = 0; i < adsData.length; i++) {
const min_v = Math.max(...dataInterval.filter((v) => v <= adsData[i]));
const max_v = Math.min(...dataInterval.filter((v) => v > adsData[i]));
//  3.寻找 min_v 所在的下标
const index = dataInterval.findIndex((v) => v === min_v);
const y_value = ((adsData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
}

const ssData2 = []
for (var i = 0; i < ssData.length; i++) {
// 1.寻找在数据间隔里小于amount的最大值
const min_v = Math.max(...dataInterval.filter((v) => v <= ssData[i]));
// 2.寻找在数据间隔里大于amount的最小值
const max_v = Math.min(...dataInterval.filter((v) => v > ssData[i]));
//  3.寻找 min_v 所在的下标
const index = dataInterval.findIndex((v) => v === min_v);
//  4.计算该amount在y轴上应该展示的位置
const y_value = ((ssData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
ssData2[i] = y_value;
}

option = {
title: {
text: 'Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: (v) => {
//console.log(v[0].dataIndex)
//界面显示原数值
return <div>
<div>${xzhou[v[0].dataIndex]}</div> <div>Email：${emailData[v[0].dataIndex]}</div>
<div>Union Ads：${adsData[v[0].dataIndex]}</div> <div>hello：${ssData[v[0].dataIndex]}</div>
</div>;
}
},
legend: {
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xzhou
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (v, i) => {
if (i === 0) {
v = '0';
}
if (i === 1) {
v = '10';
}
if (i === 2) {
v = '30';
}
if (i === 3) {
v = '50';
}
if (i === 4) {
v = '200';
}
if (i === 5) {
v = '1000';
}
if (i === 6) {
v = '5000';
}
if (i === 7) {
v = '12000';
}
return v;
}
}
}
],
series: [
{
name: 'Email',
type: 'line',
emphasis: {              //隐藏其他数据
focus: 'series'
},
data: emailData2
},
{
type: 'line',
emphasis: {
focus: 'series'
},
},
{
name: 'hello',
type: 'line',
emphasis: {
focus: 'series'
},
data: ssData2
}
]
};


• 2
点赞
• 12
收藏
觉得还不错? 一键收藏
• 1
评论
12-05 3111
09-13
07-25 2383
09-01 1618
07-28 2548
03-22 768

### “相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

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