0

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

                    }]

请帮忙！！！

4

1 回答 1

0

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

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

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

在下面的示例代码中，我创建了两种富文本样式。一个被称为a（似乎是使用单个字母的 echarts 约定），它将使文本变为粗体。在格式化程序函数中，我正在检查值是“星期六”还是“星期日”，如果是，我返回格式化的值。我定义的另一种富文本样式称为myDudes，仅在值为“星期三”时应用。myDudes将 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);

这是我得到的结果：

图表图像

于 2022-02-04T07:03:12.097 回答