option = {
title: {
text: '柱状图知识点总结',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,鼠标移动上去会显示当前数据
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
width:'230px',
type: 'scroll', //滚动
itemWidth:60,
itemHeight:68,
data:['11', '22','33', '44','55'],
textStyle:{
fontSize:12,
color:'#000'
}
},
grid: {
left: '3%', //柱状图在整体页面上的布局,距离上下左右的距离
right: '6%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLabel: {
interval:0, //横轴信息全部显示
rotate:30, //30度角倾斜显示
show: true,
textStyle: { //X轴上字体大小颜色设置
color: '#1CA261',
fontSize:10,
}
},
axisLine:{ //X轴颜色设置
show: true,
lineStyle: {
color: 'red'
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
name: '我的名字x', //设置x轴坐标轴名称
nameTextStyle: {
color: "red",
padding: [0, 0, 0, -10],
fontSize: 10
}
}],
yAxis: [{
type: 'value',
axisLine:{
show: true,
lineStyle: {
color: '#1CA261'
}
},
name: '我的名字y', //设置y轴坐标轴名称
nameTextStyle: {
color: "red",
padding: [0, 0, 0, -10],
fontSize: 10
}
}],
series: [{
type: 'bar',
name:'11',
barWidth : 20, //柱子宽度
data: [190,130,75,180,16,75,180],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5094df' //柱子的渐变颜色
}, {
offset: 1,
color: 'red'
}]),
}
}
},
{
type: 'bar',
name:'22',
barWidth : 20,
data: [180,150,55,150,50,55,170],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fbcd2e'
}, {
offset: 1,
color: 'red'
}]),
}
}
},
{
type: 'bar',
name:'33',
barWidth : 20,
data: [180,150,55,150,50,55,170],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fbcd2e'
}, {
offset: 1,
color: '#000'
}]),
}
}
},
{
type: 'bar',
name:'44',
barWidth : 20,
data: [180,150,55,150,50,55,170],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fbcd2e'
}, {
offset: 1,
color: '#ccc'
}]),
}
}
},
{
type: 'bar',
name:'55',
barWidth : 20,
data: [180,150,55,150,50,55,170],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fbcd2e'
}, {
offset: 1,
color: '#4CCE61'
}]),
}
}
}
]
};
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交