网站搜索

javascript - ECharts 格式化轴标签,格式化标签值


我已经使用了 ECharts 的柱状图,现在我想将其 Y 轴的值格式化为其他值。

现在 EChart 像上面那样生成了我的图表,但我想显示它的 Y 轴值,不是 30,000 或 60,000,而是显示为 30K、60K、80K……和 150K。

我尝试过使用 Formatter,但在 EChart 生成图表时,它并没有调用函数运行时来转换值,看起来这样我们只能给值添加前缀/后缀

yAxis: [
    {
      type: 'value',
      data: [],
      axisLine: {
        show: true,
        lineStyle: {
          show: true,
          color: "black",
         },
       },
       axisLabel: {
         formatter: '{value} K'
       }
    },

我也尝试过在格式化器中提供函数,但我没有找到将当前值作为参数传递给该函数的方法。

yAxis: [
    {
      type: 'value',
      data: [],
      axisLine: {
        show: true,
        lineStyle: {
          show: true,
          color: "black",
         },
       },
       axisLabel: {
         formatter: getFormattedValue(VALUE)
       }
    },

更新:尝试了新的方法,但仍然无法工作

当我们像下面在 EChart 官方网站上使用它时,它就能工作 https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip

      axisLabel: {
        formatter: val => `${val / 1000}K`
      }

已更新为正确格式的图表

但是当我像下面这样使用它时,它不起作用,甚至函数都没有被调用,值保持不变

      axisLabel: {
        formatter: val => `${val / 1000}K`
      }

图表未更新

答案#1

实际上,你非常接近解决方案...

let option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: val => `${val / 1000}K`
    }
  },
  series: [
    {
      data: [30000, 60000, 90000, 120000, 150000],
      type: 'line'
    }
  ]
};

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
  width: 100%;
  height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/[email /dist/echarts.min.js"></script>

<div id="main"></div>

格式化器的文档在这里:文档 - Apache ECharts