option = {
tooltip: {
trigger: 'axis'
},
title:[{
text:"70%",
left:"2%",
right: '85%'
},{
text:"15%",
left:"32%",
right: '51%'
},{
text:"-1.46%",
left:"17%",
right: '68%'
},{
text:"6.2%",
left:"47%",
right: '34%'
},{
text:"5.3%",
left:"62%",
right: '17%'
}],
grid: [{
left:"1%",
right: '86%'
}, {
left:"17%",
right: '68%'
}, {
left:"34%",
right: '51%'
}, {
left:"51%",
right: '34%'
}, {
left:"68%",
right: '17%'
}],
xAxis: [{
type: 'category',
inverse: true,
data: ['营业收入\n 30,482万元'],
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {
formatter: function (value) {
return value;
}
}
},{
type: 'category',
inverse: true,
data: ['净利润\n4,307万元'],
gridIndex: 1,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {
formatter: function (value) {
return value;
}
}
},{
type: 'category',
inverse: true,
data: ['净资产收益率\n1.8%'],
gridIndex: 2,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {
formatter: function (value) {
return value;
}
}
},{
type: 'category',
inverse: true,
data: ['净利率\n36%'],
gridIndex: 3,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {
formatter: function (value) {
return value;
}
}
},{
type: 'category',
inverse: true,
data: ['人均净利率\n32%'],
gridIndex: 4,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {
formatter: function (value) {
return value;
}
}
}],
yAxis: [{
type: 'value',
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
},{
type: 'value',
gridIndex: 1,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
},{
type: 'value',
gridIndex: 2,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
},{
type: 'value',
gridIndex: 3,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
},{
type: 'value',
gridIndex: 4,
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
}],
series: [{
name: 'A',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: "rgba(59,80,91,.6)"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [165],
},
{
name: 'B',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fd633f'},
{offset: 1, color: '#fbe247'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [150]
}, {
name: 'A',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: "rgba(59,80,91,.6)"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [165],
xAxisIndex: 1,
yAxisIndex: 1
},
{
name: 'B',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fd633f'},
{offset: 1, color: '#fbe247'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [150],
xAxisIndex: 1,
yAxisIndex: 1
}, {
name: 'A',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: "rgba(59,80,91,.6)"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
type: 'bar',
data: [165],
xAxisIndex: 2,
yAxisIndex: 2
},
{
name: 'B',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#56f9b8'},
{offset: 1, color: '#74f853'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [150],
xAxisIndex: 2,
yAxisIndex: 2
}, {
name: 'A',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: "rgba(59,80,91,.6)"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [165],
xAxisIndex: 3,
yAxisIndex: 3
},
{
name: 'B',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fd633f'},
{offset: 1, color: '#fbe247'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [150],
xAxisIndex: 3,
yAxisIndex: 3
}, {
name: 'A',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: "rgba(59,80,91,.6)"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [165],
xAxisIndex: 4,
yAxisIndex: 4
},
{
name: 'B',
type: 'bar',
barWidth: "40%",
itemStyle: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fd633f'},
{offset: 1, color: '#fbe247'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
data: [150],
xAxisIndex: 4,
yAxisIndex: 4
}
]
};
Echarts实战案例代码(2):柱图堆叠方案备选案例
关注
打赏