axisLabel.renderMode: 'html'

[ggregoire]

What problem does this feature solve?

Right now it's impossible to format the axisLabel in html.

Example:

axisLabel: {
  formatter: value => {
    return `<div class="wrapper">
      <div class="logo">
        <img src="...">
      </div>
      <span>${value}</span>
    </div>`
  }
}

This doesn't work currently.

What does the proposed API look like?

Like for tooltip:

axisLabel: {
  renderMode: 'html',
  formatter: value => {
    return `<div class="wrapper">
      <div class="logo">
        <img src="...">
      </div>
      <span>${value}</span>
    </div>`
  }
}

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[sxmpasch]

If you need a workaround now, you could use the rich option

• documentation : https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text
• example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-rich-text

var weatherIcons = {
    'Sunny': './data/asset/img/weather/sunny_128.png',
    'Cloudy': './data/asset/img/weather/cloudy_128.png',
    'Showers': './data/asset/img/weather/showers_128.png'
};

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{a|}{value}',
            rich: {
                a:{
                    backgroundColor: {
                        image: weatherIcons.Sunny,
                    },
                    height: 40,
                    color: 'red',
                }
            }
        }
        
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

[ggregoire]

@sxmpasch Thanks for the quick reply.

In my case, the urls are not static. I get them dynamically with the value of the label.

So I would need something like

axisLabel: {
  formatter: '{a|}{value}',
  rich: value => ({
    a:{
      backgroundColor: {
        image: `https://myapp.com/assets/images/${value}.png`,
      },
      height: 40,
      color: 'red',
    }
  })
}

Please let me know if you have any other workaround. :)

[ggregoire]

@sxmpasch I made it work by

• using the formatter callback function to access the current value
• generating a style for each value

axisLabel: {
  formatter: value => `{${value}|} ${value}`,
  rich: {
    ...(values.reduce((obj, value) => {
      obj[value] = {
        backgroundColor: { image: `https://myapp.com/assets/images/${value}.png` },
        height: 20,
      }
      return obj
    }, {})),
  },
}

---

Keeping the issue open in case someone wants to implement the renderMode html. ;)

[Ovilia]

axisLabel does not support HTML rendering. Using rich is correct.

[zhoufanglu]

formatter的问题解决了

//变量
let companyScore = 40
let companyLevel = '优'
//富文本rich使用
formatter: [
  `{a|`+companyScore+`}`,
  `{b|`+companyLevel+`}`,
].join('\n'),
rich: {
  a: {
    color: 'red',
    lineHeight: 10
  },
  b: {
    color: 'green',
    fontSize: 32
  },
},