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

Echarts-基于Json数据的动态多折线图

1 个答案: