§ ITPOW >> 文档 >> JavaScript >> 控件

作者：vkvi 来源：ITPOW（原创） 日期：2021-8-4

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: '#a90000' }
    }]
};

如上，在 series（对象数组）下，itemStyle 下，color 属性指定颜色。

以上 color 是直接指定的颜色字符串，也可以复杂点，比如来个渐变：

color: {
	type: 'linear',
	x: 0,
	y: 0,
	x2: 0,
	y2: 1,
	colorStops: [
		{
			offset: 0, color: 'red' // 0% 处的颜色
		},
		{
			offset: 1, color: 'blue' // 100% 处的颜色
		}
	]
}

太长了，也可以简单点：

color: new echarts.graphic.LinearGradient(
	0, 0, 0, 1,
	[
		{offset: 0, color: 'red'},
		{offset: 1, color: 'blue'}
	]
)

上述 offset: 0、offset: 1 表示 0%、100% 处的颜色，如果你愿意，也可以写个 0.5，表示 50% 处的颜色。

指定单个柱子的颜色：

那就把 itemStyle 写在 data 的某项数据中。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, {
            value: 200,
            itemStyle: {
                color:'blue'
            }
        }, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: { color: '#a90000' }
    }]
};