option = {
title: [
/*{
text: '标题',
left: 'center'
},*/
],
//当trigger为’item’时只会显示该点的数据,
//为’axis’时显示该列下所有坐标轴所对应的数据。
//提示框组件
tooltip: {
//?触发类型
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
orient: 'horizontal',
top: '50px',
data: ['a收益','b收益', 'c收益', 'd收益'],
textStyle: { // 统计项的样式
color: "#595959",
fontSize: 14
},
itemGap: 20 // 统计项的间隔
},
grid: {
left: '3%',
right: '4%',
top: '20%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category', //category:类目轴(适用于离散无序数组)
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLabel: {
show: true,
textStyle: {
color: "#595959", //X轴文字颜色
fontSize:14 // x轴文字大小
},
interval:0, // 刻度间隔
rotate:40, // 倾斜角度
align: 'center', // x轴文字居中
margin: 30 // 文字与x轴的间隔
},
axisLine: {
lineStyle: {
color: '#595959' // x轴颜色
}
},
axisTick: {
show: true // 是否展示轴线上的刻度
}
},
yAxis: {
type: 'value',
name: "",
axisLabel: {
show: true,
textStyle: {
color: "#595959", //y轴文字颜色
fontSize:14 // y轴文字大小
},
formatter: '{value}%'
},
axisLine: {
lineStyle: {
color: '#595959' // y轴颜色
}
}
},
series: [
// bar: 柱状图; line: 直线
{
name: 'a收益',
type: 'bar',
barWidth: 55, // 柱子的宽度
itemStyle: {
normal: {
color: '#267CFF',
opacity: 0.6
}
},
data: [40, 41,42]
},
{
name: "b收益",
type: 'line',
itemStyle: {
normal: {
color: '#FFBE1F',
opacity: 0.6
}
},
data: [10, 11,12]
},
{
name: 'c收益',
type: 'line',
itemStyle: {
normal: {
color: '#1CC4C4',
opacity: 0.6
}
},
data: [20, 21,22]
},
{
name: 'd收益',
type: 'line',
itemStyle: {
normal: {
color: '#FCBB74',
opacity: 0.6
}
},
smooth: true,
data: [30, 31,32]
}
]
};
效果图: