I am expecting that supplying data in key-value format would work in conjunction with encode. Encode would receive the key names instead of array indices that correspond to x/y axes. Using this approach, no data is rendered. I am using ECharts version 5.1.2. Below is the reproduction code containing one working example using array data and my attempt at using key-value data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart1" style="width: 600px; height: 400px"></div>
<div id="chart2" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
var workingChart = echarts.init(document.getElementById("chart1"));
var notWorkingChart = echarts.init(document.getElementById("chart2"));
var optionThatWorks = {
xAxis: {
type: "time",
name: "Time",
},
yAxis: {
type: "value",
name: "Value",
},
series: [
{
type: "scatter",
name: "Type A",
data: [
["2021-01-01", 10, "A"],
["2021-02-01", 20, "A"],
],
encode: {
x: 0,
y: 1,
},
},
{
type: "scatter",
name: "Type B",
data: [["2021-03-01", 25, "B"]],
encode: {
x: 0,
y: 1,
},
},
{
type: "scatter",
name: "Type C",
data: [["2021-04-01", 15, "C"]],
encode: {
x: 0,
y: 1,
},
},
],
};
var optionThatDoesNotWork = {
xAxis: {
type: "time",
name: "Time",
},
yAxis: {
type: "value",
name: "Value",
},
series: [
{
type: "scatter",
name: "Type A",
data: [
{ dimensionX: "2021-01-01", dimensionY: 10, type: "A" },
{ dimensionX: "2021-02-01", dimensionY: 20, type: "A" },
],
encode: {
x: "dimensionX",
y: "dimensionY",
},
},
{
type: "scatter",
name: "Type B",
data: [{ dimensionX: "2021-03-01", dimensionY: 25, type: "B" }],
encode: {
x: "dimensionX",
y: "dimensionY",
},
},
{
type: "scatter",
name: "Type C",
data: [{ dimensionX: "2021-04-01", dimensionY: 15, type: "C" }],
encode: {
x: "dimensionX",
y: "dimensionY",
},
},
],
};
workingChart.setOption(optionThatWorks);
notWorkingChart.setOption(optionThatDoesNotWork);
</script>
</body>
</html>