Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.0] [FEATURE] Introduce more states in echarts #12925

Merged
merged 52 commits into from Jul 19, 2020
Merged

[5.0] [FEATURE] Introduce more states in echarts #12925

merged 52 commits into from Jul 19, 2020

Conversation

pissang
Copy link
Contributor

@pissang pissang commented Jul 7, 2020

[5.0] [FEATURE] Introduce more states in echarts

Brief Information

This pull request introduces more states and user interactions in echarts. Which includes:

  1. Add blur and select state to all series. These two states have the same styling configuration with the original emphasis state
  2. Blur others when highlighting specified data through mouseover or hover linking.
  3. Unify different state configurations in series. Like highlightPolicy, focusNodeAdjacency. hoverOffset
  4. Click to select the data and apply select state.

Detail Changes

1. Introduce blur and select state in all series.

  • blur state is used when other elements fade out during the focus of some elements.
  • select state is used when some element is selected by click.

2. Add focus and blurScope to support focus effect when mouseover

focus:

focus defines which elements to keep not being blurred. It can be:

In commons series:

  • 'self' Only the data highlighted.
  • 'series' The whole series which highlighted data belongs to.

In the special series:

  • 'adjacency' Adjacency node and edges in the graph. Available in sankey / graph series. It's same with focusNodeAdjacency in 4.0
  • 'ancestor' | 'descendant' Ancestor / Descendant nodes in tree. Available in tree / treemap / sunburst series. It's same with highlightPolicy in 4.0

blurScope:

blurScope defines which elements in this scope will be blurred. It can be:

  • 'series' Blur the data in the series which highlighted data belongs to.
  • 'coordinateSystem' Blur the data in the coordinate system which highlighted data belongs to.
  • 'global' Blur all other data.

3. Unify different state configurations from 4.0 and provide a more consistent option design.

1) sunburst series:

  • downplay state is replaced by blur state. highlight state is removed.

  • highlightPolicy is replaced by

emphasis: {
  focus: 'descendant' | 'ancestor' | 'self'
}

It's supported in treemap and tree series which uses tree structure data now.

2) In graph, sankey series:

focusNodeAdjacency is replaced by:

emphasis: {
  focus: 'adjacency' | 'self'
}

3) pictorialBar, scatter, effectScatter, line, pie, boxplot, tree

hoverAnimation is replaced by:

emphasis: {
  scale: boolean
}

hoverOffset is replaced by:

emphasis: {
  scaleSize: number
}

4. Provide data selection ability to all series.

All series can use selectedMode option to turn on data selection by click, which is only available in pie and map before.

Values supported:

  • 'single': Only one data in series can be selected.
  • 'multiple': Multiple data in series can be selected.
  • true: Same with 'single'
  • false: Disable data selection. Which is by default.

Data selection action and event

action
dispatchAction({
  type: 'select'
  seriesIndex?: number | number[]
  name?: string | string[]
  dataIndex?: number | number[]
});
dispatchAction({
  type: 'unselect'
  seriesIndex?: number | number[]
  name?: string | string[]
  dataIndex?: number | number[]
});
event
{
  type: 'selectchanged',
  // same with brush event
  selected: {
      seriesIndex: number
      dataType?: string
      dataIndex: number[]
  }[]
}

For example:

{
  type: 'selectchanged',
  selected: [ { seriesIndex: 0, dataIndex: [ 0, 1 ] } ]
}

Pie and map select action and event in 4.0 has been deprecated, which includes:

actions

pieToggleSelect, pieSelect, pieUnSelect, mapToggleSelect, mapSelect, mapUnSelect

events

pieselectchanged, pieselected, pieunselected, mapselectchanged, mapselected, mapunselected,

Example of Usage

Blur others when highlighting the hovered data.

Screen Recording 2020-07-07 at 7 55 20 PM

Example code:

series: {
    type: 'bar',
    ...
    emphasis: {
        focus: 'series'
        blurScope: 'coordinateSystem'
    },
    blur: {
        opacity: 0.1
    }
}

Select data in bar series.

select

Selection status will be kept during other user interaction.

select-keep

@echarts-bot
Copy link

echarts-bot bot commented Jul 7, 2020

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

@pissang pissang marked this pull request as draft July 7, 2020 12:53
@pissang pissang changed the title [5.0] [FEATURE] Introduce more states echarts [5.0] [FEATURE] Introduce more states in echarts Jul 7, 2020
@pissang pissang marked this pull request as ready for review July 19, 2020 13:34
@pissang pissang requested a review from 100pah July 19, 2020 13:46
@pissang pissang merged commit 2db82f8 into next Jul 19, 2020
@echarts-bot
Copy link

echarts-bot bot commented Jul 19, 2020

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants