Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Echarts - custom toolbox feature mark / comment

I'm trying to create a custom toolbox feature in echarts 3.8.5, so the user can add marks or comments 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
like image 520
BorisTB Avatar asked Dec 21 '17 11:12

BorisTB


1 Answers

  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 completely 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.

like image 101
Jeffrey Roosendaal Avatar answered Oct 30 '22 22:10

Jeffrey Roosendaal