格式化程序 AxisLabel Echarts fontWeight 不起作用

Question

我想用 Echarts 格式化我的图表的轴标签，周末的格式化程序日期加粗，我试过这段代码，但我不知道为什么它不起作用：

    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';
                            }
                        },

                    }]

请帮忙!!!

Answer 1

我不确定您是否仍在寻找答案，但我在尝试找到同一问题的解决方案时发现了您的问题，所以这里 posterity。

为什么你的 xAxis 是数组而不是对象？我想你在那里有一对额外的方括号。不知道你用的是哪个版本的echarts，我用的是echarts v5.3（截至发稿时最新版本post）。

要格式化 axisLabel，您需要合并 axisLabel.formatter with axisLabel.rich。 axisLabel.rich 是您定义要用于使用富文本样式进行格式化的样式的地方。 formatter 是您可以访问 value 参数的函数，然后您可以检查该参数以有条件地从列表中选择样式。 axisLabel.fontWeight 不接受函数，因此您无法按照您尝试的方式检查 value。

在下面的示例代码中，我创建了两种富文本样式。一种叫做a（好像是echarts的约定，使用单个字母），会把文字变成粗体。在格式化程序函数中，我检查值是“星期六”还是“星期日”，如果是，我 return 格式化值。我正在定义的另一种富文本样式称为 myDudes，它仅在值为“星期三”时应用。 myDudes 将 fontWeight 更改为粗体并将文本颜色更改为漂亮的青蛙绿色。在所有其他情况下，格式化程序函数将 return 值不变。

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);

这是我得到的结果：

Chart Image

格式化程序 AxisLabel Echarts fontWeight 不起作用

Formatter AxisLabel Echarts fontWeight dosn't work

javascript

echarts

apache-echarts