Блог

Я работаю над диаграммой, используя библиотеку echarts с antd и react, и я должен следовать определенному дизайну всплывающей подсказки, как показано ниже :

что я мог бы сделать, так это :

реализация всплывающих подсказок :

  const chartOptions = {


    tooltip: {
        trigger: 'item',
        responsive: true,
        position: 'top',
        formatter: '{c}',
        backgroundColor: '#fafcfe',
        borderColor: '#c8e2f7',
        borderWidth: '0.8',
        textStyle: {
            color: '#5d6f80'
        }
    },
    xAxis: {
        data: xdata,
    },

    yAxis: {
        type: 'value',
        position: 'right',
    },
    series: [{
        data: data1,
        type: 'line',
        name: 'data1',
    },
    {
        data: data2,
        type: 'line',
        name: 'data2',
    } ] 
} 
  

есть ли какой-либо способ добавить стрелку вниз и ссылку (синяя линия между всплывающей подсказкой и символом)

решение css приемлемо, но я новичок в css и разработке интерфейса в целом

любое предложение было бы полезно, спасибо

Чтобы добавить эту линию вертикальной оси, вы можете просто изменить на trigger: 'axis' . Имейте в виду, что position: 'top' этот параметр не работает, поэтому вам придется изменить его на что-то вроде этого:

 position: function (point) {
    return [point[0], '20%'];
    // if u wanna center it to the line, then u could do something like
    // [point[0] - width_of_tooltip / 2, '20%']
}, ...
  

Что касается стрелки вниз, я вижу два варианта:

Измените параметр форматирования на функцию:

 formatter: function (params) {
        return `<div class="tooltip">${params[0]}</div>`;
    }, ...
  

и затем вы можете создать стрелку с помощью css, назначенную этому tooltip классу (смотрите пример в разделе Стрелки всплывающих подсказок здесь: https://www.w3schools.com/css/css_tooltip.asp ).

Другим вариантом было бы вручную добавить фоновое изображение стрелки всплывающей подсказки и назначить его с помощью extraCssText опции, например:

 tooltip: {
    trigger: 'axis',
    extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
    ...
}
  

там вы можете добавить дополнительные параметры CSS, чтобы все выглядело так, как вы хотите (я просто выбрал случайное текстовое поле).
Лично мне больше понравился бы первый вариант. Удачи!