前言
实现如下效果图
解决方法
option = {
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(255,255,255)", //设置背景图片 rgba格式
color: "black",
borderColor: "gray", //设置边框颜色
textStyle: {
color: "red" //设置文字颜色
},
},
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
icon: "roundRect",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
left: '50px' ,
textStyle: {
color: 'red'
}
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} ml',
color: '#fff'
},
axisLine:{
lineStyle:{
color:'#fff'
}
},
splitLine:{
lineStyle: {
type: 'dashed',
width: 2,
color: 'red'
}
}
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
color: 'red'
},
axisTick: {
show: false },
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#ddd'
}
}
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
show: true
},
barMaxWidth: 40,
itemStyle: {
color: 'red'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};