先放效果图:
刚出现这个需求的时候,自己在echarts官网的柱状图里看案例,并没有这种设置,也百度找方法,还是没有解决方法,有点慌,然后自己冷静下来思考了一下,所以还是要是冷静思考,举一反三,问题就解决了。
先说一下思考过程:一维的柱状图有设置每个柱状图颜色的方法,根据color函数,自定义一个颜色数组,然后返回每一个颜色item
就是通过以上的代码实现一维自定义每个柱状图的颜色,那么多维数组呢,道理大致相同,放代码:
set_AndonTimeChart (AndonXName,lastMonthArr,currentMonthArr) { // x轴lable数组,上月数组,当月数组
let labelOption = {
normal: {
show: true, // 开启显示
position: 'top', // 在上方显示
formatter: function (data) {
return data.value
},
textStyle: {
fontSize: 16,
},
}
}
let myChart = this.$echarts.init(document.getElementById('Time'));
let option = {
grid:{
y2:60,
x:100,
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: AndonXName,
//更改坐标轴颜色
axisLine: {
lineStyle: {
color: '#294a88',
width: 2,
opacity: 0.2
},
onZero:false
},
axisLabel: {
// x轴的字体样式
textStyle: {
color: '#657CA8', //更改坐标轴文字颜色
fontSize: 18, //更改坐标轴文字大小
fontFamily: 'MicrosoftYaHei'
},
// x轴Label换行
formatter:function(params) {
return params.split(" ").join("\n")
},
},
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: function (data) {
return data+'min';
},
// y轴的字体样式
textStyle: {
color: '#657CA8', //更改坐标轴文字颜色
fontSize: 16, //更改坐标轴文字大小
fontFamily: 'MicrosoftYaHei'
}
},
//Y坐标轴颜色
axisLine: {
lineStyle: {
color: '#294a88',
width: 2,
opacity: 0.2
}
},
//Y轴分割线
splitLine: {
show: true,
lineStyle: {
color: '#263859',
width: 1,
type: 'solid'
}
},
}
],
series: [
{
name: 'lastMonth',
type: 'bar',
barWidth: 20,//柱图宽度
label: labelOption,
data: lastMonthArr,
// 重点来了---------------------------------------------
// 上月柱状图颜色
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
var colorList = [
'#9E661E', '#988C70', '#29C74B', '#20B9C5', '#0068DE'
];
return colorList[params.dataIndex]
}
}
}
},
{
name: 'currentMonth',
type: 'bar',
barWidth: 20,//柱图宽度
label: labelOption,
data: currentMonthArr, //
// 重点来了---------------------------------------------
// 当月柱状图颜色
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
var colorList = [
'#EE9A22', '#EED49C', '#C8F316', '#00EDFF', '#3BACFF'
];
return colorList[params.dataIndex]
}
}
}
},
],
}
// 绘制图表
myChart.setOption(option);
},
遇到问题还是要冷静思考,不要慌~