echart对应的每个柱形图 对应的分类标题 设置颜色
时间: 2023-11-14 07:25:19 浏览: 57
好的,针对您的问题,可以使用 ECharts 中的 `color` 属性为每个柱形图设置颜色。具体来说,您可以为每个分类标题设置一个对应的颜色,然后在 `series` 中为每个数据项设置颜色。以下是示例代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
// x轴数据
xAxis: {
type: 'category',
data: ['分类1', '分类2', '分类3', '分类4'],
},
// y轴数据
yAxis: {
type: 'value',
},
// 数据系列
series: [
{
// 数据
data: [20, 30, 40, 50],
// 颜色数组,与数据一一对应
color: ['#FF7F50', '#87CEFA', '#DA70D6', '#32CD32'],
// 柱形图样式
type: 'bar',
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的代码中,`xAxis` 和 `yAxis` 分别代表柱形图的分类标题和对应的数值,`color` 是一个数组,存储了每个分类标题对应的颜色。`series` 中的 `data` 数组和 `color` 数组一一对应,用来设置柱形图的数据和颜色。最后使用 `myChart.setOption(option);` 显示图表。
需要注意的是,如果数据和颜色数组的长度不一致,ECharts 会自动循环使用颜色数组中的颜色,因此最好保证两个数组的长度相同。