专注Java教育14年 全国咨询/投诉热线:444-1124-454
赢咖4LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 Echarts柱状图颜色设置的方法

Echarts柱状图颜色设置的方法

更新时间:2022-10-18 09:48:05 来源:赢咖4 浏览2327次

Echarts柱状图颜色如何设置?赢咖4小编来告诉大家。通过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);

 

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>