我正在尝试绘制多行时间线图(行数根据 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'}
]
最佳答案
您应该将轴数据与值分开存储在简单的多线图表中:请参阅以下两个示例: 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;
})()
}
]
};
关于json - Echarts - 基于Json数据的动态多折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56375553/