想修改为图标和文字上下排列(现在是图标和文字左右排列,文字在右。希望现在能修改为图标在上,文字在下)
配置项如下
option = {
backgroundColor: '#fafbfd',
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
bottom: "70px",
align: "auto",
padding: [0, 0, 0, 50],
textStyle:{
padding: [50, 20, 1, -55],
},
orient: "horizontal", //横向排列
width: 400, //图标所占的宽度
itemWidth: 25, //图标的高度
itemHeight: 25, //图标的宽度
itemGap: 25, //图标之间的间隔
borderWidth: 1,
borderColor: "#000",
data: ['一年限量套餐', '两年限量套餐', '三年限量套餐', '一年不限量套餐', '两年不限量套餐', '三年不限量套餐'],
},
grid: {
left: '3%',
right: '4%',
bottom: '50%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['2017/12/8', '2017/12/9', '2017/12/10', '2017/12/11', '2017/12/12', '2017/12/13', '2017/12/14']
}],
yAxis: [{
type: 'value'
}],
color: ['#f0f0c6', '#a3e2f8', '#d8f0ba', '#f8b551', '#279cc5', '#6c9c2f'], //修改饼图的默认颜色
series: [{
name: '一年限量套餐',
type: 'bar',
stack: '限量套餐',
data: [320, 332, 301, 334, 390, 330, 320]
}, {
name: '两年限量套餐',
type: 'bar',
stack: '限量套餐',
data: [120, 132, 101, 134, 90, 230, 210]
}, {
name: '三年限量套餐',
type: 'bar',
stack: '限量套餐',
data: [220, 182, 191, 234, 290, 330, 310]
}, {
name: '一年不限量套餐',
type: 'bar',
stack: '不限量套餐',
data: [120, 132, 101, 134, 90, 230, 210]
}, {
name: '两年不限量套餐',
type: 'bar',
stack: '不限量套餐',
data: [220, 182, 191, 234, 290, 330, 310]
}, {
name: '三年不限量套餐',
type: 'bar',
stack: '不限量套餐',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};