Echarts - Special Feature Label / Comment

Question

I am trying to create a special toolkit function in echarts 3.8.5 so that the user can add labels or comments to the chart. I did not find any demos with custom functions, and there is no documentation for the extension APIs.

My questions:

• How to configure a user-defined function as "active" when the user clicks on it (for example, as when selecting a brush in predefined functions).
• How can I get user click coordinates in a chart
• How to add a custom item to a chart

Answer 1

• How to set a user-defined function as "active" when the user clicks on it (for example, when you select a brush in predefined functions)

  • You can submit an action ,
  • Or you can manually modify the chart object and overwrite / replace the existing chart object. You can use chart.setOption () to insert a brand new chart object **

• How to get user click coordinates in a chart

  • Use mouse events to capture clicks, freezes, etc.

• How to add a custom item to a chart

  • To add something (axis, series, ..) to the parameters, you can use chart.setOption () .
  • To switch settings or trigger actions such as datazoom, you can send an action .

---

** If you have a custom toolbar feature (note: it should always start with mine):

toolbox: { feature: { myFeature: { show: true, title: 'My custom feature', icon: 'image:path/to/image-inactive.png' onclick: function (){ // do something } } } }, 

You can manually update the icon to an active state using:

 chart.setOption({ toolbox: { feature: { myFeature: { icon: 'image:path/to/image-active.png' } } } }) 

Echarts will detect the changes and update the icon. Of course, you can return it to inactive with the same logic.