ECharts柱状图颜色
时间: 2023-06-29 08:06:11 浏览: 70
ECharts柱状图可以通过设置系列中的`itemStyle`来设置柱子的颜色。具体可以使用以下代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
// 设置柱子颜色
color: '#0099CC'
}
}]
};
```
在上面的代码中,我们通过设置`itemStyle`中的`color`属性来设置柱子颜色。可以自行修改为自己想要的颜色值。另外,如果需要设置不同类别的柱子颜色不同,可以通过设置`data`数组中每个元素的`itemStyle`属性来实现。
相关问题
echarts柱状图颜色
可以通过设置每个柱子的颜色来实现echarts柱状图每个柱颜色不一样的效果。具体方法是在series中设置itemStyle属性,然后在itemStyle中设置color属性,将每个柱子的颜色设置为不同的值即可。例如:
```
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
color: function(params) {
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
return colorList[params.dataIndex];
}
}
}]
```
以上代码中,colorList数组中存储了5种不同的颜色,然后在itemStyle的color属性中通过函数返回对应柱子的颜色值,params.dataIndex表示当前柱子的索引。这样就可以实现每个柱颜色不一样的效果了。
echarts 柱状图颜色
在 ECharts 中,可以通过设置 series.itemStyle.normal.color 或 series.itemStyle.emphasis.color 属性来自定义柱状图的颜色。
下面是一个示例代码,演示如何设置柱状图的颜色:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
// 自定义柱状图每个柱子的颜色
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
return colorList[params.dataIndex];
}
}
}
}]
};
```
在上面的代码中,通过设置 itemStyle.normal.color,我们可以使用一个自定义的颜色列表来为每个柱子指定颜色。在这个示例中,颜色列表包含了五种不同的颜色。
你也可以根据自己的需求,使用其他的颜色配置方式来设置柱状图的颜色。