"Formatter 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

我不確定您是否仍在尋找答案，但我在嘗試找到相同問題的解決方案時發現了您的問題，所以這里是為了后代。

為什么你的xAxis<\/code>是一個數組而不是一個對象？ 我想你那里有一對額外的方括號。 我不知道您要使用哪個版本的 echarts，但我使用的是 echarts v5.3（截至本文發布時的最新版本）。

要格式化axisLabel<\/code> ，您需要將axisLabel.formatter<\/code><\/a>與axisLabel.rich<\/code><\/a>結合起來。 axisLabel.rich<\/code>是您定義要用於使用富文本樣式進行格式化的樣式。 formatter<\/code>是您可以訪問value<\/code>參數的函數，然后您可以檢查它以有條件地從列表中選擇一種樣式。 axisLabel.fontWeight<\/code>不接受函數，因此您無法以嘗試的方式檢查value<\/code> 。

在下面的示例代碼中，我創建了兩種富文本樣式。 一個稱為a<\/code> （似乎是使用單個字母的 echarts 約定），它將使文本變為粗體。 在格式化程序函數中，我正在檢查值是“星期六”還是“星期日”，如果是，我返回格式化的值。 我定義的另一種富文本樣式稱為myDudes<\/code> ，僅在值為“星期三”時應用。 myDudes<\/code>將 fontWeight 更改為粗體，並將文本的顏色更改為漂亮的青蛙綠色。 在所有其他情況下，格式化程序函數將返回不變的值。

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