I'm trying to create a custom toolbox feature in echarts 3.8.5, so the user can add marks or ments to the chart. I didn't find any demo with custom features, and documentation to Extension API is missing.

My questions:

1. How to set custom feature as "active" when user clicks on it (e.g., like when you select brush in predefined features)
2. How can I get coords of user click in chart
3. How to add custom element to chart

I'm trying to create a custom toolbox feature in echarts 3.8.5, so the user can add marks or ments to the chart. I didn't find any demo with custom features, and documentation to Extension API is missing.

My questions:

1. How to set custom feature as "active" when user clicks on it (e.g., like when you select brush in predefined features)
2. How can I get coords of user click in chart
3. How to add custom element to chart

• javascript
• echarts

1 Answer 1

1. How to set custom feature as "active" when user clicks on it (e.g., like when you select brush in predefined features)

   • You can either dispatch an action,
   • Or you can manually change the chart object and overwrite/replace the existing chart object. You can use chart.setOption() to insert a pletely new chart object **

2. How can I get coords of user click in chart

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

3. How to add custom element to chart

   • For adding something (axis, series, ..) to options, you can use chart.setOption().
   • For toggling settings or triggering actions such as datazoom, you can dispatch an action.

** When you have a custom toolbox feature (note: it must always start with my):

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 by using:

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

Echarts will detect the changes, and updates the icon. Of course, you can set it back to inactive with the same logic.