echarts柱形图legend设置每个柱子颜色
程序员文章站
2022-07-13 14:25:13
...
设置每个柱子对应一个图标。legend对应每个series 的name来设置。所以要定义多组
option = {
legend: { // 对应series的name
data:['直接访问','邮件营销','联盟广告','视频广告'']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip : {
//trigger: 'axis', //显示其他分类
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
stack: '广告', //设置分类,同一类合并,多个series数据成一个柱
type:'bar',
itemStyle: { //配置样式,设置每个柱子的颜色
normal:{
color: function (params){
var colorList = ['#f54882','#47d1de','#8058bd','#ffd84f'];
return colorList[params.dataIndex];
}
},
data:[320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[0, 132]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[0, 0, 191,]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[0, 0, 0, 154]
},
]
};
上一篇: POI按照源单元格设置目标单元格格式