javascript 设置AxisLabel ECharts格式,设置标签值格式

ee7vknir  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(147)

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

现在EChart生成了我的图表,就像上面一样,但是我想显示它的Y轴值,而不是30,000或60,000,我想显示它为30 K,60 K,80 K..和150 K。
我已经尝试了格式化,但它没有调用函数运行时,而EChart生成一个图表转换值,看起来像这样,我们可以只添加前缀/后缀的值

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

我也试过在formatter中给予函数,但我没有找到一种方法来将当前值作为参数传递给这个函数。

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`
      }

Updated chart with correct format
但是当我像下面这样使用它时,它就不工作了,即使函数没有被调用,值也保持不变

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

Chart not getting updated

yhxst69z

yhxst69z1#

实际上,你已经非常接近解决方案了……

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/echarts@5.4.1/dist/echarts.min.js"></script>

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

格式化程序的文档如下:文档- Apache电子图表

相关问题