Is it possible to supply key-value data directly to series.data option in ECharts?

Viewed 138

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>

0 Answers
Related