Question

我有一个折线图，在x轴上绘制了月份，在y轴上绘制了每个月的值。看起来像这样

我的选项配置为

option = {
  title: {
    text: 'Title',
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      label: {
        formatter: 'format1',
      },
    },
  },
  legend: {},
  xAxis: {
    axisPointer: {
      label: {
        formatter: 'format2',
      },
    },
    axisLabel: {
      formatter: 'format3',
    },
    type: 'category',
    splitLine: {
      show: true,
    },
    axisLine: {
      show: true,
    },
  },
  yAxis: [
    {
      position: 'right',
      type: 'value',
      splitLine: {
        show: true,
      },
      axisLine: {
        show: true,
      },
    },
  ],
  dataset: {
    source: [
      {
        month: 1420070400000,
        value1: 5,
        value2: 0,
        value3: 3,
        value4: 4,
      },
      {
        month: 1422748800000,
        value1: 10,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1425168000000,
        value1: 11,
        value2: 0,
        value3: 3,
        value4: 4,
      },
      {
        month: 1427846400000,
        value1: 15,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1430438400000,
        value1: 20,
        value2: 0,
        value3: 3,
        value4: 4,
      },
      {
        month: 1433116800000,
        value1: 5,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1435708800000,
        value1: 10,
        value2: 0,
        value3: 3,
        value4: 4,
      },
      {
        month: 1438387200000,
        value1: 15,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1441065600000,
        value1: 20,
        value2: 0,
        value3: 3,
        value4: 4,
      },
      {
        month: 1443657600000,
        value1: 0,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1446336000000,
        value1: 10,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1448928000000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1451606400000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1454284800000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1456790400000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1459468800000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1462060800000,
        value1: 12,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1464739200000,
        value1: 22,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1467331200000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1470009600000,
        value1: 12,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1472688000000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1475280000000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1477958400000,
        value1: 22,
        value2: 1,
        value3: 3,
        value4: 4,
      },
      {
        month: 1480550400000,
        value1: 2,
        value2: 1,
        value3: 3,
        value4: 4,
      },
    ],
    dimensions: ['month', 'value1', 'value2', 'value3', 'value4'],
  },
  series: [
    {
      type: 'line',
      tooltip: {
        formatter: 'format4',
      },
    },
    {
      type: 'line',
      tooltip: {
        formatter: 'format4',
      },
    },
    {
      type: 'line',
      tooltip: {
        formatter: 'format4',
      },
    },
    {
      type: 'line',
      tooltip: {
        formatter: 'format4',
      },
    },
  ],
};

我正在使用trigger: 'item'作为工具提示，其工具提示在屏幕快照中看起来像。我需要将工具提示中的月份值格式化为MMM-YYYY格式，为此我将使用类似

的格式化程序功能

function formatter(params) {
  console.log(params);
  return dayjs(params.value.month).format('MMM, YYYY');
}

如果我在series[index].tooltip.formatter中指定了格式化程序，则它将整个工具提示替换为格式化程序返回的值，而不仅仅是月份值。

我该如何在工具提示中格式化月份值，以使工具提示中的其他内容默认保持不变？

实时演示的链接：https://echarts.apache.org/examples/en/editor.html?c=line-simple

Answer 1

Echart允许您修改工具提示中的所有字段，而不仅仅是一个字段。因此，在使用工具提示格式化程序时，您需要构建所有剩余字段。所有必需的细节都将以参数形式出现。您可以使用以下格式化程序

from collections import defaultdict
data = {}
players = defaultdict(list)

for team_name, team_link in team.items():
    player_page = requests.get(team_link)
    cont = soup(player_page.text, 'lxml')
    clud_ele = cont.find_all('span', attrs={'class' : 'playerCardInfo'})
    for i in clud_ele:
        num = i.select('span.number')[0].get_text(strip=True)
        number = 100 if num == '-' else num
        name = i.select('h4.name')[0].get_text(strip=True)
        position = i.select('span.position')[0].get_text(strip=True)
        players[team_name].append({'number': number, 'position': position, 'name': name})

在工具提示中设置Trigger = item

1 个答案: