Вывод даты на русском языке в js графике

Рейтинг: 0Ответов: 1Опубликовано: 07.01.2023

Ребята подскажите, пожалуйста, как реализовать вывод даты на русском языке? Смотрел похожие скрипты в сети, но в силу отсутствия знаний js не смог разобраться. На графике выводятся данные за последние семь дней. Получаю их из DB и вставляю в график путем добавления php кода с необходимыми данными. Благодарю за любой ответ.

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

  if ($ticketVolume) {
    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')
        });
      });
    });
  }
}; 

Ответы

Ответов пока нет.