echarts 设置柱子的颜色代码
在 Echarts 中，你可以通过设置series的color属性来设置柱子的颜色。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Echarts 柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var data = [
{ value: 10, name: '一月' },
{ value: 30, name: '二月' },
{ value: 20, name: '三月' },
{ value: 40, name: '四月' },
{ value: 50, name: '五月' },
{ value: 60, name: '六月' },
{ value: 70, name: '七月' },
{ value: 80, name: '八月' },
{ value: 90, name: '九月' },
{ value: 100, name: '十月' },
{ value: 110, name: '十一月' },
{ value: 120, name: '十二月' }
];
var option = {
title: {
text: '柱状图示例'
},
legend: {
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
min: 0,
max: 150,
interval: 20
},
series: [
{
name: '柱状图',
data: data,
type: 'bar',
color: ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff', '#000', '#f00', '#0f0', '#00f', '#ff0', '#f0f']
}
]
};
chart.setOption(option);
</script>
</body>
</html>
本文来源：黑龙码(gongfuma.com.cn)
声明：本文系黑龙码原创稿件，版权属[黑龙码 gongfuma.com.cn]所有。
未经授权不得转载，已经协议授权的媒体下载使用时须注明"稿件来源：黑龙码"，违者将依法追究责任。
