How to Reference Several Data sets
Figure 1. Docs from Apache ECharts
Figure 2. Example Code
const fooEChartComponent = (() => {
// Dataset -- generate data points
const mockDataset = [
{
source: [
{ startTimeUnixMs: new Date(12, 1, 1, 1), durationMs: 1000, spanCount: 10, errorCount: 0, traceId: '121' },
{ startTimeUnixMs: new Date(12, 1, 1, 2), durationMs: 2000, spanCount: 10, errorCount: 0, traceId: '122' },
{ startTimeUnixMs: new Date(12, 1, 1, 3), durationMs: 3000, spanCount: 10, errorCount: 0, traceId: '123' },
]
},
{
source: [
{ startTimeUnixMs: new Date(12, 1, 1, 4), durationMs: 4000, spanCount: 10, errorCount: 0, traceId: '124' },
{ startTimeUnixMs: new Date(12, 1, 1, 5), durationMs: 5000, spanCount: 10, errorCount: 0, traceId: '125' },
{ startTimeUnixMs: new Date(12, 1, 1, 6), durationMs: 6000, spanCount: 10, errorCount: 0, traceId: '126' },
]
}
]
return mockDataset
]
// Create a formatting template for each series in the data set
const mockSeriesFormatting = [
{...seriesFormatting, datasetIndex:0}, {...seriesFormatting, datasetIndex: 1}
]
// Render Charts with options (dataset and series formatting)
const options: EChartsOption = {
dataset: dataset,
series: mockSeriesFormatting,
};
return (
<EChart
sx={{
width: width,
height: height,
}}
option={eChartOptions}
theme={chartsTheme.echartsTheme}
/>
);
}
}