echarts折线图颜色设置
时间: 2023-09-29 21:04:57 浏览: 50
ECharts 折线图的颜色可以通过配置项中的 `color` 属性进行设置。
例如,可以按照以下方式定义一个颜色数组:
```javascript
var colors = ['#5793f3', '#d14a61', '#675bba'];
```
然后在 `option` 中使用 `color` 属性来引用该颜色数组:
```javascript
option = {
color: colors,
...
series: [
{
name:'邮件营销',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
```
这样就可以让所有折线使用该颜色数组中的颜色依次进行渲染。如果想要为不同的折线分别指定不同的颜色,可以在 `series` 中对每个折线单独进行设置,如下所示:
```javascript
option = {
series: [
{
name:'邮件营销',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle: {
color: '#5793f3'
}
},
{
name:'联盟广告',
type:'line',
data:[220, 182, 191, 234, 290, 330, 310],
itemStyle: {
color: '#d14a61'
}
},
{
name:'视频广告',
type:'line',
data:[150, 232, 201, 154, 190, 330, 410],
itemStyle: {
color: '#675bba'
}
},
{
name:'直接访问',
type:'line',
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle: {
color: '#33cccc'
}
},
{
name:'搜索引擎',
type:'line',
data:[820, 932, 901, 934, 1290, 1330, 1320],
itemStyle: {
color: '#99ccff'
}
}
]
};
```
这样就可以为每个折线都单独指定颜色了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)