apache / apache/echarts

Add Dataset support to Treemap, Graph, Lines, Sankey

Open
#15,093 3 comments 1 reaction 1 assignee Claimed by @100pah View on GitHub
en new-feature
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?
We want to have a support of Dataset by ````Treemap, Graph, Lines, Sankey!!!````

_Using the version 4 Echarts we are providing the WebUI, where user can visualize data from different SQL-like databases using the SQL. So, in daily usage of our UI, user developing SQL and run the query, then data being sent to fronted and in with UI elements user can define what data columns will be applied to ```xAxis```, ```yAxis``` and ```series.data {}```
![image](https://user-images.githubusercontent.com/9085502/120910420-e8c57180-c64c-11eb-8d5e-c7101b288cc8.png)

With Echarts 5, we really liked the concept of using Dataset, because in many cases the user can just select the 2d table way data and encode data to ```xAxis``` and ```yAxis```.

Right now, Echarts 5 do not support Treemap, Graph, Lines, Sankey with complex data mapping because as it says in docs:
> In fact, setting data via series.data is not deprecated and useful in some cases. For example, for some charts, like treemap, graph, lines, that do not apply table data, dataset is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), appendData is probably needed to load data incrementally. dataset is not supported in the case._

But the thing is, as in Echarts 4 using data as in Echarts 5 using Dataset, to visualize Treemap, Graph, Lines, Sankey in both ways the user is responsible to prepare data "on back-end". As prepare JSON file and using data map the data as to prepare data in a graph-way using SQL and encode col and rows to ```"source", "target", "value"```.

Here, in the example shown how with SQL you can prepare data to Sankey and it would be very easy with Dataset map the data:
https://medium.com/@byanjati/sankey-diagram-7761dc7bd3eb

### What does the proposed API look like?
The below example could be wrong, but I want to try to bring some idea maybe how to develop support.

Using the knowledgeof SQL and UNION and WITH and other methods is a good way to prepare data, So Dataset for Sankey could looks like for example:
```
var option = {
dataset: {
source: [
['nodes','source', 'target', 'value'],
['Matcha Latte','Matcha Latte', 'Milk Tea', 89.3],
['Cheese Cocoa', 'Matcha Latte', 'Cheese Cocoa', 74.4],
['Cheese Brownie', 'Cheese Cocoa', 'Cheese Brownie', 50.1],
['Tea', 'Cheese Cocoa', 'Tea', 89.7],
]
},
series: [
{
type: 'Sankey',
encode: {
// Map dimension "nodes" to the W axis.
w: 'names',
// Map dimension "'source" to the X axis.
x: 'source',
// Map dimension "target" to the Y axis.
y: 'target'
// Map dimension "value" to the Z axis.
z: 'value'
}
}
]
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.