echarts 折线图修改折线颜色
时间: 2025-03-21 10:05:20 浏览: 37
### 如何在 ECharts 中修改折线图的线条颜色
要在 ECharts 中修改折线图的线条颜色,可以通过配置 `series` 的 `lineStyle.color` 属性来实现。以下是具体的说明以及一个完整的代码示例。
#### 配置项详解
- **`series.lineStyle.color`**: 此属性用于定义折线的颜色[^1]。
- 如果需要进一步自定义样式,还可以调整其他参数,比如线条宽度 (`width`) 和透明度 (`opacity`) 等[^2]。
#### 示例代码
以下是一个简单的例子,展示如何通过设置 `lineStyle.color` 来更改折线图中的线条颜色:
```javascript
// 初始化 echarts 实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 定义图表选项
var 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',
lineStyle: { // 设置线条样式
color: '#FF5733' // 更改线条颜色为橙红色
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
上述代码中,`lineStyle.color` 被设为了 `'#FF5733'`,这表示将折线的颜色更改为一种橙红色。
#### 进一步优化
如果希望同时改变数据点的颜色,可以使用 `itemStyle.color` 属性。例如,在系列对象中加入如下配置即可同步修改数据点的颜色:
```javascript
itemStyle: {
color: '#FF5733' // 数据点颜色同样被设定为橙红色
}
```
这样不仅改变了连接各点之间的线条颜色,还统一了整个序列的表现风格。
---
阅读全文
相关推荐


















