echarts修改柱状图颜色
时间: 2023-10-04 22:11:39 浏览: 189
echarts 柱状图渐变色背景
5星 · 资源好评率100%
你可以通过 `color` 属性来修改柱状图的颜色。具体来说,你需要为每根柱子指定一个颜色值。
下面是一个简单的示例代码,演示了如何通过 `color` 属性来修改柱状图的颜色:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var 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',
// 修改颜色
color: ['#3398DB']
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的代码中,我们使用 `color` 属性将所有的柱子颜色都设置为了 `#3398DB`。
如果你想为不同的柱子设置不同的颜色,你可以将 `color` 属性设置为一个数组,数组中的每个元素对应一个柱子的颜色。
例如:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var 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',
// 修改颜色
color: ['#3398DB', '#8BC34A', '#FF9800', '#9C27B0', '#607D8B', '#FF5722', '#795548']
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的代码中,我们为每个柱子设置了不同的颜色。你可以根据自己的需求修改颜色数组中的值,以达到你想要的效果。
阅读全文