echart 折线图改变折线点的颜色
时间: 2023-10-19 14:26:42 浏览: 73
要改变 ECharts 折线图中折线点的颜色,可以使用 ECharts 中提供的 itemStyle.normal.color 属性。itemStyle.normal.color 属性用于设置折线点的颜色,可以是一个具体的颜色值,也可以是一个回调函数。
以下是一个示例:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
color: function(params) { // 使用回调函数设置折线点的颜色
if (params.dataIndex % 2 === 0) { // 奇数点为红色,偶数点为蓝色
return 'red';
} else {
return 'blue';
}
}
}
}
}]
};
```
这个示例中,itemStyle.normal.color 属性被设置为一个回调函数。该函数接受一个参数 params,params.dataIndex 表示当前折线点在数据数组中的索引。根据索引的奇偶性,回调函数返回红色或蓝色。这样就可以将折线点的颜色根据数据自动改变。
阅读全文