实现背景
基于电建二期智慧大屏v1.1.0功能，需实现图表刻度线均匀分布
环境搭建
开发工具：Visual Studio Code
软件环境：Node.js搭建Vue.js的开发环境
处理前编码及效果
编码
yAxis: [
{
type: 'value',
name: '万kWh',
alignTicks: true,
nameTextStyle: {
padding: [0, 58, 0, 0],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#888'
}
},
},
{
type: 'value',
name: '%',
alignTicks: true,
nameTextStyle: {
padding: [0, 0, 0, 28],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: false
}
}
],
效果
数值相对较小时，图表展示正常
数值相对较大时，图表展示，由于图表区域高度固定，echarts绘制刻度线较多，显得非常拥挤，且刻度值展示不全
官方API解决方式
编码
设置Y轴最大值max，最小值min，间隔值interval
// 获取数据最大值
let maxNumber = 0
let allArr = [].concat(arr1,arr2)
if (allArr.length) {
maxNumber = allArr.reduce(function (prev, current) {
return (parseFloat(prev)> parseFloat(current)) ? prev : current
});
}
// 为Y轴设置最大值，最小值，间隔
yAxis: [
{
type: 'value',
name: '万kWh',
min: maxNumber,// 此处
max: 0,// 此处
interval: 2000,// 此处
alignTicks: true,
nameTextStyle: {
padding: [0, 58, 0, 0],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#888'
}
},
},
{
type: 'value',
name: '%',
alignTicks: true,
nameTextStyle: {
padding: [0, 0, 0, 28],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: false
}
}
],
效果
第一张图获取数据最大值，间隔值固定2000，导致图表绘制刻度线分配不均，刻度值重叠，由于高度一定导致展示不全。这时候会思考将间隔值更改以保证绘制美化，第二张图间隔值固定4000，但是最大值并非固定，上述问题同样存在，这种思路不可行
处理后编码及效果
编码
设置间距方法 setInterval（最小值，最大值）
setInterval(min, max) {
let oldMax = max
// 防止小数，影响数字长度获取，先进性向上取整操作
max = Math.ceil(max)
// 获取数字长度，长度为4则代表是千位，为5则代表是万位。。
let maxlen = max.toString().length
// 设置刻度线最大值（5可理解为分为五等份，均分值）
let tickNum= 5
// 倍数
let multiple= 1
let interval = 0
let outMax = 0
// 若数字长度大于等于3，则均分值和倍数需进行拼接0，拼接0的个数为数字长度减2
for (let i=0;i<maxlen - 2;i++) {
tickNum= tickNum + '0'
multiple= multiple + '0'
}
// 获取间隔且输出整数
interval = Math.ceil(max / Number(tickNum)) * Number(multiple)
// 获取最大值且输出整数
outMax = Math.ceil(max / interval) * interval
// 特殊值处理，最大值10及以下设置固定间距
if(oldMax <= 10) {
if (oldMax > 1) {
return {
max: 10,
min,
interval: 2,// 默认2间距
};
} else {
return {
max: 1,
min,
interval: 0.2,// 默认0.2间距
};
}
} else {
return {
max: outMax,
min,
interval: interval,
};
}
},
//定义变量
let interval = {
max:0,
min:0,
interval:0,
}
let maxNumber = 0
let allArr = [].concat(arr1,arr2)
if (allArr.length) {
maxNumber = allArr.reduce(function (prev, current) {
return (parseFloat(prev)> parseFloat(current)) ? prev : current
});
// 调用方法
interval = this.setInterval(0, maxNumber);
}
yAxis: [
{
type: 'value',
name: '万kWh',
min: interval.min,// 此处使用
max: interval.max,// 此处使用
interval: interval.interval,// 此处使用
alignTicks: true,
nameTextStyle: {
padding: [0, 58, 0, 0],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#888'
}
},
},
{
type: 'value',
name: '%',
alignTicks: true,
nameTextStyle: {
padding: [0, 0, 0, 28],
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 14,
color: 'rgba(255,255,255,0.8)'
}
},
splitLine: {
show: false
}
}
],
效果
当前获取数据最大值，间隔值根据最大值位数动态设置，刻度线设置至多5个，保证了图表展示完整及美观
实现意义
解决echarts间隔值固定，数值过大导致刻度线过多且分配不均，刻度值展示重叠，图表高度不够展示不全等问题
