Apache eCharts - zhuje/openshift-wiki GitHub Wiki

How to Reference Several Data sets

Source: https://echarts.apache.org/handbook/en/concepts/dataset/

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}
	    />
	  );
	}
}