Drop down menu to interact with graph

Heya, I’m trying to recreate the visualisation under Select found via this link: ECharts Instance | Volkov Labs

I’ve tried recreating it with the code below but the issue I’m currently facing is that the graph overlaps with the drop down menu and I’m not too sure on how to separate them.

It would also be amazing if someone could provide me and example on how to get the drop down menu to interact with the line graph itself.

This is the code, I’ve been using so far:

//Get the DOM for the panel
let dom = echartsInstance.getDom();

//Get the child nodes
let nodeList = dom.childNodes;

//If we haven't added our controls to the DOM yet
if (nodeList.length < 2) {
  //Create a select list
  const selectList = document.createElement("select");
  selectList.id = "mySelect";
  selectList.style.borderStyle = "solid";

  //Add options
  const array = ["value1", "value2", "value3", "value4"];
  array.forEach((value) => {
    const option = document.createElement("option");
    option.value = value;
    option.text = value;
    selectList.appendChild(option);
  });

  //Add click event handler
  selectList.addEventListener("change", () => {
    alert("Selected value: " + selectList.value);
  });

  //Create a new <div>
  const div = document.createElement("div");
  div.innerHTML += "Select ";
  div.style.marginLeft = "10px";

  //Add select to <div>
  div.appendChild(selectList);

  //Insert new <div> ahead of existing chart div
  dom.insertBefore(div, dom.firstChild);
}

const series = data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;

  return {
    name: s.refId,
    type: 'line',
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
    },
    lineStyle: {
      width: 1,
    },
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
  };
});

return {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    left: '0',
    bottom: '0',
    data: data.series.map((s) => s.refId),
    textStyle: {
      color: 'rgba(128, 128, 128, .9)',
    },
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        icon: {
          zoom: 'path://',
          back: 'path://',
        },
      },
      saveAsImage: {},
    }
  },
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
    min: 'dataMin',
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '2%',
    bottom: 24,
    containLabel: true,
  },
  series,
};

@zyan To prevent overlapping, you can set styles in this section:

//Create a new <div>
  const div = document.createElement("div");
  div.innerHTML += "Select ";
  div.style.marginLeft = "10px";

To update drop down based on the line graph selection or event, use Event Handlers as described in documentation:

1 Like