[英]Formatter AxisLabel ECharts, Format label value
I have used BAR chart from ECharts and now I want to format its Y-Axis value to some other value.我使用了 ECharts 的条形图,现在我想将其 Y 轴值格式化为其他值。
Right now EChart generated my chart like above, But I want to display its Y-Axis value instead of 30,000 or 60,000 I want to display it as 30K, 60K, 80K.., and 150K.现在 EChart 像上面那样生成了我的图表,但是我想显示它的 Y 轴值而不是 30,000 或 60,000 我想将它显示为 30K、60K、80K.. 和 150K。
I have tried with Formatter but it's not calling function runtime while EChart generating a chart to convert the value, Looks like this way we can just add Prefix/Suffix to the value我试过 Formatter 但它没有调用 function 运行时,而 EChart 生成图表来转换值,看起来这样我们可以只为值添加前缀/后缀
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: '{value} K'
}
},
I have also tried to give the function in formatter but I didn't find a way to pass the current value as a parameter in this function.我还尝试在格式化程序中提供 function,但我没有找到将当前值作为参数传递给 function 的方法。
yAxis: [
{
type: 'value',
data: [],
axisLine: {
show: true,
lineStyle: {
show: true,
color: "black",
},
},
axisLabel: {
formatter: getFormattedValue(VALUE)
}
},
UPDATED: WITH NEW TRY, BUT STILL IT's NOT WORKING更新:使用新的尝试,但仍然无法正常工作
When we use it like below on EChart official site then it's working https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#formatting-of-values-in-tooltip当我们在 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更新了格式正确的图表
But when I use it like below then it's not working, Even function is not getting called, the Value remain as it is但是当我像下面那样使用它时它就不起作用了,即使 function 也没有被调用,值保持原样
axisLabel: {
formatter: val => `${val / 1000}K`
}
You are very close to the solution, actually...实际上,您非常接近解决方案...
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>
The formatter is documented here: Documentation - Apache ECharts格式化程序记录在此处: Documentation - Apache ECharts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.