Skip to content

inconsistencies between yAxis.axisLabel and yAxis.axisPointer.label formatters #8294

@astik

Description

@astik

inconsistencies between yAxis.axisLabel and yAxis.axisPointer.label formatters with string configuration (interpolation seems to give different results)

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 4.x
  • Browser version [浏览器类型和版本]: tested with chrome 66.0.3359.139 and firefox 59.0.2, but i don't think it matters
  • OS Version [操作系统类型和版本]: tested with osx 10.13.3, but i don't think it matters

Expected behaviour [期望结果]

Formatter with same configuration should give the same result for both labels (yAxis.axisLabel and yAxis.axisPointer.label).

ECharts option [ECharts配置项]

option = {
    tooltip: {
        trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        },
        axisPointer: {
            label:{
                formatter: '{value}'
            }
        }
    },
    series: [
        {
            name:'A',
            type:'line',
            data:[120000.5, 132000.5, 101000.5, 134000.5, 90000.5, 230000.5, 210000.5]
        },
        {
            name:'B',
            type:'line',
            data:[220000.5, 282000.5, 201000.5, 234000.5, 290000.5, 430000.5, 410000.5]
        }
    ]
};

With this configuration, you'll end-up with :

  • yAxis.axisLabel will display "120000.5" for 120000.5
  • yAxis.axisPointer.label will display "120,000.5" for 120000.5

To get a consistent display, you'll need to have this configuration :

option = {
    tooltip: {
        trigger: 'axis',
	axisPointer: {
		type: 'cross',
        },
        formatter: function formatArrayValue(value) {
            var result = value.map(function(v){
                return `${v.marker} ${v.seriesName} : ${v.value}`
            })
            return `${value[0].name}<br />${result.join('<br />')}`
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        },
        axisPointer: {
            label:{
                formatter: function(a){return a.value}
            }
        }
    },
    series: [
        {
            name:'A',
            type:'line',
            data:[120000.5, 132000.5, 101000.5, 134000.5, 90000.5, 230000.5, 210000.5]
        },
        {
            name:'B',
            type:'line',
            data:[220000.5, 282000.5, 201000.5, 234000.5, 290000.5, 430000.5, 410000.5]
        }
    ]
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    staleInactive for a long time. Will be closed in 7 days.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions