色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

echarts 修改json數據格式

老白1年前9瀏覽0評論

在實際開發中,我們經常使用ECharts來進行數據可視化展示。但有時我們需要修改JSON數據格式以符合ECharts組件的要求。

首先,讓我們來看一下一般的ECharts數據格式:

var data = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};

如果我們已有一份數據,并且想要把它轉換成ECharts數據格式,我們可以按以下步驟進行操作:

1. 確定數據中每個元素對應ECharts的哪個組件。

2. 根據ECharts的要求,修改數據格式。

以下是一個實際案例:

var data = [
{day: 'Mon', sales: 820, consumption: 120},
{day: 'Tue', sales: 932, consumption: 130},
{day: 'Wed', sales: 901, consumption: 140},
{day: 'Thu', sales: 934, consumption: 150},
{day: 'Fri', sales: 1290, consumption: 160},
{day: 'Sat', sales: 1330, consumption: 170},
{day: 'Sun', sales: 1320, consumption: 180}
];

我們需要將此數據轉換成ECharts能夠識別的格式,其中"xAxis.data"對應每個柱狀圖/折線圖/餅圖等的橫坐標,"series"對應每個圖形的數據。

var chartData = {
xAxis: {
type: 'category',
data: []
},
series: [
{
type: 'line',
data: []
}, 
{
type: 'line',
data: []
}
]
};
data.forEach(function(item) {
chartData.xAxis.data.push(item.day);
chartData.series[0].data.push(item.sales);
chartData.series[1].data.push(item.consumption);
});

最終的chartData數據對象格式為:

{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}, 
{
type: 'line',
data: [120, 130, 140, 150, 160, 170, 180]
}
]
};

通過以上操作,我們可以把現有的JSON數據格式轉換成符合ECharts要求的數據格式,讓數據得以正確地展示在圖表上。