带有图例的横向柱形图
数据获取的时候每一个柱形图都要单独获取,具体代码如下:
option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: [{
orient: 'horizontal',
bottom: '17%',
left: '10%',
right: '5%',
itemGap: 1.5,
itemWidth: 18,
itemHeight: 10,
align: 'auto',
textStyle: {
color: '#fff',
fontSize: 8,
},
// tslint:disable-next-line:max-line-length
data: ['新能源汽车零部件配件制造占比(%)', '发电机及发电机制造占比(%)', '新能源汽车整车制造占比(%)', '新能源汽车储能装置制造占比(%)', '新能源汽车电动机制造占比(%)', '供能装置制造占比(%)', '试验装置制造占比(%)'],
},
{
bottom: '17%',
left: '25%',
right: '5%',
width: 'auto',
itemGap: 3,
align: 'left',
textStyle: {
color: '#fff',
fontSize: 8,
},
},
],
grid: {
// width:'70%',
height: '55%',
left: '3%',
top: '0',
bottom: '30%',
containLabel: true,
},
color: '#fff',
xAxis: {
min: 0,
max: 100,
type: 'value',
axisLabel: {
color: '#fff',
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: countryName,
axisLabel: {
color: '#fff',
},
},
series: [
{
name: '新能源汽车零部件配件制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data1,
itemStyle: {
normal: {
color: '#10ecea',
},
},
},
{
name: '新能源汽车整车制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data3,
itemStyle: {
normal: {
color: '#ff0825',
},
},
},
{
name: '发电机及发电机制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data2,
itemStyle: {
normal: {
color: '#d3d534',
},
},
},
{
name: '新能源汽车储能装置制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data4,
itemStyle: {
normal: {
color: '#0ff299',
},
},
},
{
name: '新能源汽车电动机制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data5,
itemStyle: {
normal: {
color: '#fc6b32',
},
},
},
{
name: '供能装置制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data6,
itemStyle: {
normal: {
color: '#84e693',
},
},
},
{
name: '试验装置制造占比(%)',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
},
},
data: Data7,
itemStyle: {
normal: {
color: '#cea965',
},
},
},
],
}
效果图如下: