![cover](https://img-blog.csdnimg.cn/bc807f18410c445991f006d53bf0e4a1.png)
ECharts自定义Y轴间隔刻度,不均分配
多组数据展示差距过大,在图表中数据小的贴X轴显示看不出来,造成图表不直观,先通过修改Y轴刻度,并进行不均自定义分配可以解决这个问题。在ECharts中操作,代码未作封装,请自行封装。
·
问题分析
多组数据展示差距过大,在图表中数据小的贴X轴显示看不出来,造成图表不直观,先通过修改Y轴刻度,并进行不均自定义分配可以解决这个问题。
如下图所示:
代码
在ECharts中操作,代码未作封装,请自行封装。
<body>
<div style="width: 1200px ;height: 600px;" id="main"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main'));
//数据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);
const adsData2 = []
for (var i = 0; i < adsData.length; i++) {
// 1.寻找在数据间隔里小于adsData的最大值
const min_v = Math.max(...dataInterval.filter((v) => v <= adsData[i]));
// 2.寻找在数据间隔里大于adsData的最小值
const max_v = Math.min(...dataInterval.filter((v) => v > adsData[i]));
// 3.寻找 min_v 所在的下标
const index = dataInterval.findIndex((v) => v === min_v);
// 4.计算该adsData在y轴上应该展示的位置
const y_value = ((adsData[i] - min_v) / (max_v - min_v)) * 10 + index * 10;
adsData2[i] = y_value;
}
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: {
data: ['Email', 'Union Ads','hello']
},
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
},
{
name: 'Union Ads',
type: 'line',
emphasis: {
focus: 'series'
},
data: adsData2
},
{
name: 'hello',
type: 'line',
emphasis: {
focus: 'series'
},
data: ssData2
}
]
};
</script>
更多推荐
所有评论(0)