Блог

Главная - Вопросы по программированию - Как использовать временные метки unix в качестве значений x, но даты в качестве меток x в линейном графике ECharts

Как использовать временные метки unix в качестве значений x, но даты в качестве меток x в линейном графике ECharts

#javascript #echarts #apache-echarts

Вопрос:

У меня возникли большие проблемы с использованием временных меток unix, преобразованных в дату, в качестве значений для моего графика ECharts. Ось x моего графика должна быть временем записи каждой из соответствующих цен покупки или продажи (которые являются линиями). Это прекрасно работает, когда я просто использую метку времени в необработанном виде (т. Е. 1627353870000), но когда я пытаюсь установить тип диаграммы по оси x в значение «время», она превращается в странный линейный график, изображенный ниже.

Работа с меткой времени

Не работает с типом, установленным на «время»

Вот основной блок, с которым я работаю:

 var buy_price = {
    title: {
        text: 'Prices Comparison Chart'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Buy Price', 'Sell Price']
    },
    xAxis: {
        type: 'time', // evil line (works like first picture when removed)
        data: [1627353870000, 1627353810000, 1627353820000, 1627353830000]
    },
    yAxis: [{ min: 1,
             max: 100,
             type: 'value'
    }],
    series: [{
        name: 'Buy Price',
        type: 'line',
        symbol: 'none',
        data: [2, 4, 6, 8]
    },
    {
        name: 'Sell Price',
        type: 'line',
        symbol: 'none',
        data: [1, 2, 3, 4]
    }]
};

Я действительно заблудился здесь, и, похоже, в Интернете не слишком много помощи для этой библиотеки.

Ответ №1:

Вам нужно изменить значение даты на строку даты с помощью «Date.parse()». И вам нужно привязать даты к значению цен. Ваш код будет выглядеть следующим образом:

 var option;

var data1 = [["2018-08-15T10:04:01.339Z",2],["2018-08-15T10:14:13.914Z",4],["2018-08-15T10:40:03.147Z",6],["2018-08-15T11:50:14.335Z",8]];

var data2 = [["2018-08-15T10:04:01.339Z",1],["2018-08-15T10:14:13.914Z",2],["2018-08-15T10:40:03.147Z",3],["2018-08-15T11:50:14.335Z",4]];

option = {
title: {
    text: 'Prices Comparison Chart'
},
tooltip: {
    trigger: 'axis'
},
legend: {
    data: ['Buy Price', 'Sell Price']
},
xAxis: {
    type:"time",
},
yAxis: {
         type: 'value'
},
series: [{
    name: 'Buy Price',
    type: 'line',
    symbol: 'none',
    data: data1
},
{
    name: 'Sell Price',
    type: 'line',
    symbol: 'none',
    data: data2
}
]
};

option amp;amp; myChart.setOption(option);

И вы рисуете график так: Смотрите график

Метки: ,