如何在JS ECharts图表中实现俄语日期输出？

你的代码里使用了dayjs格式化日期，但默认是英文本地化规则，要输出俄语日期，只需给dayjs添加俄语语言包并配置即可，具体步骤如下：

1. 引入dayjs俄语本地化脚本 #

如果是通过CDN引入dayjs，需额外添加俄语语言包脚本：

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ru.js"></script>

如果用npm管理依赖，安装后在代码中引入：

import 'dayjs/locale/ru';

2. 修改ECharts日期格式化逻辑 #

针对你代码里的xAxis.axisLabel.formatter部分，做如下修改（二选一即可）：

方式一：全局设置俄语本地化（推荐，全局生效） #

在图表初始化代码开头添加一行：

window.dayjs.locale('ru');

原formatter函数保持不变，此时MMM会自动输出俄语月份缩写（如Янв、Фев等）。

方式二：仅在日期格式化时指定俄语 #

直接修改formatter函数：

formatter: function formatter(value) {
  return window.dayjs(value).locale('ru').format('MMM DD');
}

修改后的完整代码片段（关键部分） #

var ticketVolumeChartInit = function ticketVolumeChartInit() {
  var $ticketVolume = document.querySelector('.echart-ticket-volume');

  if ($ticketVolume) {
    // 全局设置dayjs使用俄语本地化
    window.dayjs.locale('ru');
    
    var userOptions = utils.getData($ticketVolume, 'options');
    var chart = window.echarts.init($ticketVolume);
    var ticketVolumeLegend = document.querySelectorAll('[data-ticket-volume]');

    var getDefaultOptions = function getDefaultOptions() {
      return {
        color: [utils.getColors().primary, localStorage.getItem('theme') === 'dark' ? '#235FAD' : '#6AA2EC', localStorage.getItem('theme') === 'dark' ? '#1C4477' : '#AACAF4', localStorage.getItem('theme') === 'dark' ? '#152C48' : '#DFEBFB'],
        legend: {
          data: ['Посещения', 'Просмотры новостей', 'Просмотры офферов', 'Переходы по офферам'],
          show: false
        },
        xAxis: {
          type: 'category',
          data: utils.getPastDates(7),
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: utils.getGrays()['300']
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: utils.getGrays()['600'],
            formatter: function formatter(value) {
              return window.dayjs(value).format('MMM DD');
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: utils.getGrays()['300']
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: utils.getGrays()['600']
          }
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          axisPointer: {
            type: 'none'
          },
          backgroundColor: utils.getGrays()['100'],
          borderColor: utils.getGrays()['300'],
          textStyle: {
            color: utils.getColors().dark
          },
          borderWidth: 1,
          transitionDuration: 0,
          position: function position(pos, params, dom, rect, size) {
            return getPosition(pos, params, dom, rect, size);
          },
          formatter: tooltipFormatter
        },
        series: [{
          name: 'Посещения',
          type: 'bar',
          stack: 'total',
          data: <?php echo json_encode($visits); ?>,
          emphasis: {
            itemStyle: {
              color: utils.getColor('primary')
            }
          }
        }, {
          name: 'Просмотры новостей',
          type: 'bar',
          stack: 'total',
          data: <?php echo json_encode($news_views); ?>,
          emphasis: {
            itemStyle: {
              color: localStorage.getItem('theme') === 'dark' ? '#2567BD' : '#5595E9'
            }
          }
        }, {
          name: 'Просмотры офферов',
          type: 'bar',
          stack: 'total',
          data: <?php echo json_encode($views_offers); ?>,
          emphasis: {
            itemStyle: {
              color: localStorage.getItem('theme') === 'dark' ? '#205396' : '#7FB0EF'
            }
          }
        }, {
          name: 'Переходы по офферам',
          type: 'bar',
          stack: 'total',
          data: <?php echo json_encode($transitions); ?>,
          itemStyle: {
            barBorderRadius: [2, 2, 0, 0]
          },
          emphasis: {
            itemStyle: {
              color: localStorage.getItem('theme') === 'dark' ? '#1A3F6F' : '#AACAF4'
            }
          }
        }],
        grid: {
          right: '0px',
          left: '23px',
          bottom: '6%',
          top: '10%'
        }
      };
    };

    echartSetOption(chart, userOptions, getDefaultOptions);
    ticketVolumeLegend.forEach(function (el) {
      el.addEventListener('change', function () {
        chart.dispatchAction({
          type: 'legendToggleSelect',
          name: utils.getData(el, 'ticket-volume')
        });
      });
    });
  }
};

完成以上修改后，ECharts的X轴就会显示俄语格式的日期，比如Янв 01、Фев 02这类样式。

内容的提问来源于stack exchange，提问作者Иван