Echarts - динамический многострочный график на основе данных Json

Question

Я пытаюсь построить график временной шкалы с несколькими строками (число линий является динамическим на основе данных Json).Я получаю данные Json, как уже упоминалось.Я хотел бы, чтобы каждая линия была построена для каждого продукта.Как мне преобразовать данные для поддержки echarts?

[
 {date: "2019-05-21 00:00:00 UTC", value: 100, product: 'p1'},
 {date: "2019-05-21 00:00:00 UTC", value: 50, product: 'p2'},
 {date: "2019-05-19 00:00:00 UTC", value: 200, product: 'p3'},
 {date: "2019-05-18 00:00:00 UTC", value: 70, product: 'p1'},
 {date: "2019-05-18 00:00:00 UTC", value: 125, product: 'p2'},
 {date: "2019-05-18 00:00:00 UTC", value: 55, product: 'p3'}
]

Answer 1

Вы должны хранить данные вашей оси отдельно от ваших значений в простой многострочной диаграмме: см. Следующие два примера: https://echarts.baidu.com/echarts2/doc/example/line1.html#-en https://echarts.baidu.com/echarts2/doc/example/line8.html#-en

Во втором примере представлен тип оси времени «time», который мы можем использовать с первым, что обеспечивает хороший многострочный каркас.

Ваш вариант может выглядеть примерно так:

option = {
    title : {
        text: 'Multi-line Time Axis example',
        subtext: 'made for Dileep'
    },
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'time',
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} $'
            }
        }
    ],
    series : [
        {
            name: 'series1', // Product p1, for instance
            type: 'line',
            data: (function () {
                var d = [];
                var len = 0;
                var now = new Date();
                var value;
                while (len++ < 10) {
                    d.push([
                        new Date(2014, 9, 1, 0, len * 10000), // some Date() object
                        (Math.random()*30).toFixed(2) - 0// // some random value
                    ]);
                }
                return d;
            })()
        },
              {
            name: 'series2', // product p2
            type: 'line',
            data: (function () {
                var d = [];
                var len = 0;
                var now = new Date();
                var value;
                while (len++ < 10) {
                    d.push([
                        new Date(2014, 9, 1, 0, len * 10000),
                        (Math.random()*30).toFixed(2) - 0,
                    ]);
                }
                return d;
            })()
        }
    ]
};