Skip to main content

ECharts Instance

The echartsInstance is a created instance (container) of the Apache ECharts library. It allows you to do the following:

  • Get the width and height of the ECharts container.
  • Get the DOM (Document Object Model) to include additional elements.
  • Resize the chart size.
  • Handle events.
  • Update options, etc.

For more details, please review the documentation for echartsInstance.

Scale when resizing​

To scale the content for fitting the resized panel, you need to use the instance methods to retrieve the width and height of the panel.

  graphic: {
    type: "image",
    style: {
      image: `data:image/svg+xml;utf8,${SVG}`,
      width: echartsInstance.getWidth(),
      height: echartsInstance.getHeight(),
    },
  },

Create DOM elements​

You can add elements (buttons, checkboxes, dropdown boxes, etc.) to the DOM (Document Object Model) using the instance.

Button​

You can add a button with an on-click event handler on top of the Business Charts panel.

Add a button to handle events in the Apache ECharts container.
Add a button to handle events in the Apache ECharts container.
docs/volkovlabs-echarts-panel/js/dom.js
loading...

Select​

Add a select box with an on-change event handler.

Add a select box with options and update the Apache ECharts options based on the user's selection.
Add a select box with options and update the Apache ECharts options based on the user's selection.
docs/volkovlabs-echarts-panel/js/select.js
loading...