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

第二个例子提供了“时间”x轴类型，我们可以和第一个一起使用，它提供了一个很好的多线框架。

您的选项可能如下所示：

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;
            })()
        }
    ]
};