apache / apache/echarts

[Bug] Item Style not working for dataset.source

Open
#19,683 4 comments 6 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.4

### Link to Minimal Reproduction

https://codepen.io/isachenx/pen/BaEooWx

### Steps to Reproduce

I forked the "Distribution of Electricity" example. Instead of using series.data for x and y axis separately, I used dataset.source and added the itemStyle to the datapoint. I am trying to change the red point at index 8 to green so that the circles are always green even if line is red.

```js
option = {
title: {
text: 'Distribution of Electricity',
subtext: 'Fake Data'
},
dataset: {
source: [
{
x: '00:00',
y: 300
},
{
x: '01:15',
y: 280,
},
{
x: '02:30',
y: 250
},
{
x: '03:45',
y: 260
},
{
x: '05:00',
y: 270
},
{
x: '06:15',
y: 300
},
{
x: '07:30',
y: 550
},
{
x: '08:45',
y: 500
},
{
x: '10:00',
y: 400,
itemStyle: {
color: 'green',
}
},
{
x: '11:15',
y: 390
},
{
x: '12:30',
y: 380
},
{
x: '13:45',
y: 390
},
{
x: '15:00',
y: 400
},
{
x: '16:15',
y: 500
},
{
x: '17:30',
y: 600
},
{
x: '18:45',
y: 750
},
{
x: '20:00',
y: 800
},
{
x: '21:15',
y: 700
},
{
x: '22:30',
y: 600
},
{
x: '23:45',
y: 400
}
]
},
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [
{
lte: 6,
color: 'green'
},
{
gt: 6,
lte: 8,
color: 'red'
},
{
gt: 8,
lte: 14,
color: 'green'
},
{
gt: 14,
lte: 17,
color: 'red'
},
{
gt: 17,
color: 'green'
}
]
},
series: [
{
name: 'Electricity',
type: 'line',
smooth: true,
// data ,
markArea: {
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
data: [
[
{
name: 'Morning Peak',
xAxis: '07:30'
},
{
xAxis: '10:00'
}
],
[
{
name: 'Evening Peak',
xAxis: '17:30'
},
{
xAxis: '21:15'
}
]
]
}
}
]
};

```

### Current Behavior

Currently it is impossible to change the colour of the symbol of a single data point when using data.source array instead of series.data.

### Expected Behavior

Should be able to change the symbol colour.

### Environment

```markdown
- OS:Sonoma 14.3
- Browser: Chrome
- Framework: None
```

### Any additional comments?

This bug was reported before: https://github.com/apache/echarts/issues/14116

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.