echarts 横向柱状图设置每一根的颜色
时间: 2023-10-10 20:11:14 浏览: 48
要设置 echarts 横向柱状图每一根的颜色,可以在 `series` 中的 `itemStyle` 中设置 `color` 属性。具体可以参考以下代码示例:
```javascript
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
series: [{
type: 'bar',
data: [55, 20, 36, 70],
itemStyle: {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25'
];
return colorList[params.dataIndex]
}
}
}]
};
```
在上面的示例中,我们在 `itemStyle` 中设置了一个颜色数组 `colorList`,然后通过 `params.dataIndex` 获取当前柱状图的索引,从而获取对应的颜色值。最终将颜色值返回给 `color` 属性即可。
相关问题
echarts横向柱状图设置图上百分比展示
可以通过设置 `formatter` 属性来在横向柱状图上展示百分比。下面是一个例子:
```javascript
option = {
xAxis: {
type: 'value',
max: 100
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
series: [{
type: 'bar',
data: [20, 35, 50, 75],
label: {
show: true,
position: 'right',
formatter: '{c}%'
}
}]
};
```
上面的代码中,通过设置 `formatter: '{c}%'` 来将数据格式化为百分比展示在柱状图上。其中 `{c}` 表示当前数据项的值。在该例子中,柱状图的 x 轴最大值为 100,因此数据项的值为百分比。如果 x 轴的最大值不为 100,需要根据实际情况调整数据项的值。
echarts横向柱状图设置y轴字体样式
可以通过以下代码来设置横向柱状图的 y 轴字体样式:
```javascript
yAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#333', // 字体颜色
fontSize: 14, // 字体大小
fontWeight: 'bold' // 字体粗细
}
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
```
其中 `yAxis` 表示 y 轴,`axisLabel` 表示轴标签,`textStyle` 表示字体样式,可以设置颜色、大小、粗细等属性。另外,`data` 表示 y 轴数据,这里使用的是类别型数据,所以设置了 `type: 'category'`。