Changing data symbol when using ECharts dataset format - echarts

Question

ECharts allows defining different symbol for each data point when using series.data option like in this example:
option = {
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
series: [
{
symbolSize: 50,
data: [
{ value: ['2023-01-01T15:00:00Z', 10], symbol: 'circle' },
{ value: ['2023-01-01T16:00:00Z', 20], symbol: 'rect' },
{ value: ['2023-01-01T17:00:00Z', 15], symbol: 'triangle' }
],
type: 'line'
}
]
};
This could be used e.g. to display weather symbol in a weather forecast chart. The example defines data under series, however it seems to be an older approach and now it is recommended to use datasets instead.
How to set the symbol per datapoint when providing data in dataset.source?

Answer 1

series.symbol can be a callback function which can access the data from dataset and return different symbol for each data point:
If symbols needs to be different, you can set with callback function
in the following format:
(value: Array|number, params: Object) => string The first parameter
value is the value in data, and the second parameter params is the
rest parameters of data item.
So using dataset and callback, the code becomes:
option = {
dataset: {
source: [
// Each entry has 3rd value set to the symbol name.
['2023-01-01T15:00:00Z', 10, 'circle'],
['2023-01-01T16:00:00Z', 20, 'rect'],
['2023-01-01T17:00:00Z', 15, 'triangle'],
]
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
series: [
{
symbolSize: 50,
// The first parameter 'value' is the entry in dataset.
// 3rd value (value[2]) is the symbol name.
symbol: (value, params) => value[2],
type: 'line'
}
]
};