配置效果
配置每个柱子不同颜色的代码
itemStyle: {
normal: {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' //指0%处的颜色
}, {
offset: 1, color: 'blue' //指100%处的颜色
}], false)
}
}
完整代码
// 指定图表的配置项和数据
var option = {
title: {
text: '碳排放量(tCO2e)',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {},
xAxis: {
data: ['常减压', '2#常', '催化', '重加'],
axisLine: {
show: true,
lineStyle: {
color: "#CBEDFF"
},
},
axisTick: {
show: false //y轴坐标点消失
},
},
yAxis: {
type: 'value',
// show:false,
axisLine: {
show: false, //y轴线消失
lineStyle: {
color: "#CBEDFF"
},
},
axisTick: {
show: false //y轴坐标点消失
},
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: "#006691"
}
},
},
series: [{
name: '碳排放量',
type: 'bar',
data: [3500, 2000, 1800, 1600],
backgroundStyle: {
color: '#00FCFF'
},
barWidth: 21,
itemStyle: {
normal: {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' //指0%处的颜色
}, {
offset: 1, color: 'blue' //指100%处的颜色
}], false)
}
}
}]
};
配置每个柱子的渐变颜色
itemStyle: {
normal: {
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function (params) {
console.log(params);
var colorList = [
['#00FCFF', '#008297'],
['#0091FF', '#005EA4'],
['#901698', '#F157EE'],
['#40FBCB', '#009871']
];
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
], false);
}
}
},
完整代码
// 指定图表的配置项和数据
var option = {
title: {
text: '碳排放量(tCO2e)',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {},
xAxis: {
data: ['常减压', '2#常', '催化', '重加'],
axisLine: {
show: true,
lineStyle: {
color: "#CBEDFF"
},
},
axisTick: {
show: false //y轴坐标点消失
},
},
yAxis: {
type: 'value',
// show:false,
axisLine: {
show: false, //y轴线消失
lineStyle: {
color: "#CBEDFF"
},
},
axisTick: {
show: false //y轴坐标点消失
},
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: "#006691"
}
},
},
series: [{
name: '碳排放量',
type: 'bar',
data: [3500, 2000, 1800, 1600],
backgroundStyle: {
color: '#00FCFF'
},
barWidth: 21,
itemStyle: {
normal: {
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function (params) {
console.log(params);
var colorList = [
['#00FCFF', '#008297'],
['#0091FF', '#005EA4'],
['#901698', '#F157EE'],
['#40FBCB', '#009871']
];
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
], false);
}
}
},
}]
};