echarts 柱状图翻转 适合排名展示 越小越大,越大越小
先上效果(折线图也可):
代码:
const dataList = [1, 2, 9, 8, 10, 13, 3];//*
const offset = 2; // 定义偏移值 *
// 计算最大值并创建处理后的数据列表 *
const maxValue = Math.max(...dataList);
const processedDataList = dataList.map(
(value) => Math.abs(value - maxValue) + offset
);
// ECharts图表配置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
min: 1,
max: maxValue + 1,
axisLabel: {
formatter: (value) => {
// 根据最大值和偏移值调整刻度显示 *
const adjustedValue = offset - (value - maxValue);
return adjustedValue <= 0 ? 1 : adjustedValue;
}
}
},
series: [
{
data: processedDataList,
type: 'bar'
}
]
};
单纯使用
inverse:true,//翻转
scale:true//不包含0刻度
也可达到翻转效果,但存在以下情况:
柱状图情况下,使用inverse:true
生长效果是从上至下。
折线图存在面积颜色的情况下,inverse:true
渐变颜色在上部。
根据需求酌情选择使用。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」