JSFiddle - React, Tailwind, and code Playground

by ovillani

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Apache ECharts Basic Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="chart-container">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

JavaScript

const chart = echarts.init(document.getElementById("chart-container"));

chart.setOption({
	dataset: {
    sourceHeader: true,
    source: [
        ["WKN", 'Val A', 'Val B', 'Val C'],
        ["W01",    12.1,    21.2,    31.3],
        ["W02",    18.1,    23.2,     6.3],
        ["W03",    22.1,    31.2,    41.3],
        //["W04",    10.1,    19.2,    25.3],
        ["W04", NaN, NaN, NaN],
        ["W05",    44.1,    33.2,    41.3],
        ["W06",    37.1,    22.2,    33.3],
        ["W07",    26.1,    29.2,    31.3],
    ]
  },
  tooltip: {},
  legend: {
    //data:['Sample'],
  },
  xAxis: {
    type: 'category',
    //boundaryGap: false,
  },
  yAxis: {
     	type: 'value'
  },
  series: [
  	{
    	name: 'Sample A',
    	type: 'line',
    	seriesLayoutBy: 'column',
    	encode: {x:'WKN', y: 'Val A'},
    	endLabel: {show: true},
      smooth: true,
    },
    {
	    name: 'Sample B',
      type: 'line',
      seriesLayoutBy: 'column',
      encode: {x:'WKN', y: 'Val B'},
      endLabel: {show: true},
      smooth: true
   	}
  ],
});

window.addEventListener('resize', console.log(chart));