Formatter AxisLabel Echarts fontWeight dosn't work

Question

I want format Axis Label of my chart with Echarts, formatter date of weekend to be bold, I tried this code but I can't know why it doesn't work:

    xAxis: [{
                        type: 'category',
                        data: day,
                        inverse: false,
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                             textStyle: {
                                color: function (value, index) {
                                var d = moment(value).weekday(), index;
                                return (d == 0 || d == 6) ? 'red' : 'black';
                                }
                             },
                            formatter: (function(value, index){
                                    var m = moment(value).format("DD/MM"), index;
                                    return m;
                                }),
                            fontWeight: function (value, index) {
                                var n = moment(value).weekday(), index;
                                return (n == 0 || n == 6) ? 'bold' : 'normal';
                            }
                        },

                    }]

Any help please!!!

score 3 · Accepted Answer · answered Feb 04 '22 at 07:03

I'm not sure if you are still looking for an answer, but I found your question while trying to find the solution to the same problem, so here goes for posterity.

Why is your xAxis an array and not an object? I think you got an extra pair of square brackets there. I don't know what version of echarts you are trying to use, but I am using echarts v5.3 (latest as of the time of this post).

To format the axisLabel you need to combine axisLabel.formatter with axisLabel.rich. axisLabel.rich is where you define the styles you want to use for formatting using rich text styles. formatter is the function where you get access to the value parameter, which you can then check to pick a style from the list conditionally. axisLabel.fontWeight doesn't accept a function, so you can't check for value the way you are trying to do.

In the below example code I am creating two rich text styles. One is called a (seems to be the echarts convention to use single letters), which will turn the text bold. In the formatter function I am checking if the value is "Saturday" or "Sunday", and if it is, I return the formatted value. The other rich text style I am defining is called myDudes, which is only applied when the value is "Wednesday". myDudes changes fontWeight to bold and changes the color of the text to a nice froggy green. In all other cases, the formatter function will return the value unchanged.

const echartsContainer = document.querySelector("#echarts-container");
const chart = echarts.init(echartsContainer);
const option = {
  title: { text: "Happiness Level by Day of Week" },
  tooltip: {},
  xAxis: {
    data: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday",
    ],
    axisLabel: {
      interval: 0,
      width: 90,
      overflow: "break",
      formatter: function (v) {
        if (v == "Sunday" || v == "Saturday") {
          return `{a|${v}}`;
        }
        if (v == "Wednesday") {
          return `{myDudes|${v}}`;
        }
        return v;
      },
      rich: {
        a: {
          fontWeight: "bold",
        },
        myDudes: {
          color: "#00AA33",
          fontWeight: "bold",
        },
      },
    },
  },
  yAxis: {},
  series: [
    {
      name: "Happiness level",
      type: "bar",
      data: [4, 5, { value: 10, itemStyle: { color: "#00AA33" } }, 6, 8, 9, 7],
    },
  ],
};

chart.setOption(option);

This is the result I get:

Chart Image

Formatter AxisLabel Echarts fontWeight dosn't work

1 Answers1