A fan chart was recently developed using Echarts, adding two sectors to an echarts instance.

The requirement displays the first of the current two sectors by default. Data is displayed when the mouse cursor is moved in. The first data is displayed by default after the mouse cursor is removed. Use dispatchAction as prompted

The basic use

mychart.dispatchAction({
   type:' ' // Optional value highlight downplay
   seriesIndex:0 // The value is a graph index in the current instance, which can receive an array
   dataIndex:0 // Which default value of the current chart needs to be displayedName: string type})Copy the code

The first data is displayed by default

Mychart. DispathAction ({type:'downplay', seriesIndex:[0,1],// display dataIndex:0})Copy the code

Start writing mouse interaction

You can print e and there will be a lot of things you want. Mychart.on ('mouseover'.e= >{
    if(e.dataIndex ! =0){
        mychart.dispathAction({
            type:'downplay'.seriesIndex:e.componentIndex,
            dataIndex:0
      })
    }
})

mychart.on('mouseout'.e= >{
        mychart.dispathAction({
            type:'highlight'.seriesIndex:e.componentIndex,
            dataIndex:0})})Copy the code

Final rendering