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渐变颜色在上部。
根据需求酌情选择使用。

posted @ 2024-05-22 16:25  Lm_Ui_Gne  阅读(34)  评论(0编辑  收藏  举报