Echarts柱状图颜色设置的方法 - 极悦
首页 课程 师资 教程 报名

Echarts柱状图颜色设置的方法

  • 2022-10-18 09:48:05
  • 2630次 极悦

Echarts柱状图颜色如何设置?极悦小编来告诉大家。通过ECharts的itemStyle设定一个数组设定颜色的循环。

option= {
backgroundColor: '#003',
title: {
text: '耗时',
textStyle: {
color: '#eee'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'category',
data: serviceKey,
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
series: [
{
name: '耗时',
type: 'bar',
data: avgTime,
//begin
itemStyle: { 
normal:{ 
color: function (params){
var colorList = ['rgb(205,85,85)','rgb(210,105,30)','rgb(0,139,0)','rgb(178,58,238)','rgb(54,100,139)'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
//end
}
]
}
myChart.setOption(option);

 

选你想看

你适合学Java吗?4大专业测评方法

代码逻辑 吸收能力 技术学习能力 综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学
姓名
手机
提交