option = {
backgroundColor: '#32374d',
title: [{
text: 'infographic chart✍',
x: '50%',
y: 30,
textAlign: 'center',
textStyle: {
fontSize: '30',
fontWeight: '100',
color: '#FFF',
textAlign: 'center',
},
}, ],
legend: {
top: '16%',
textStyle: {
color: '#a4a8b4'
},
},
grid: {
left: '3%',
top: '25%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// margin: 10,
color: '#a4a8b4',
}
},
yAxis: {
type: 'category',
data: ['E', 'D', 'C', 'B', 'A'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
// margin: 10,
color: '#a4a8b4',
}
},
color: [
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(235,112,236,.8)'
},
{
offset: 0.8,
color: 'rgba(77,75,221,.8)'
},
{
offset: 1,
color: 'rgba(77,75,221,0)'
}
]),
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(255,157,96,.8)'
},
{
offset: 0.8,
color: 'rgba(246,84,157,.8)'
},
{
offset: 1,
color: 'rgba(246,84,157,0)'
}
]),
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(132,225,145,.8)'
},
{
offset: 0.8,
color: 'rgba(106,185,242,.8)'
},
{
offset: 1,
color: 'rgba(106,185,242,0)'
}
]),
],
series: [{
name: '',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [100, 100, 100, 100, 100, ],
barWidth: 5,
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, .1)',
},
},
z: 1
},
{
name: 'A',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(240,82,255,1)'
},
{
offset: 0.8,
color: 'rgba(77,75,221,1)'
},
{
offset: 1,
color: 'rgba(77,75,221,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [29, 19, 26, 44, 20, ]
},
{
name: 'B',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(255,151,60,.8)'
},
{
offset: 0.8,
color: 'rgba(246,84,157,.8)'
},
{
offset: 1,
color: 'rgba(246,84,157,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [38, 36, 44, 33, 20, ]
},
{
name: 'C',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(102,255,124,.8)'
},
{
offset: 0.8,
color: 'rgba(106,185,242,.8)'
},
{
offset: 1,
color: 'rgba(106,185,242,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor:'#000',
textShadowBlur:'0',
textShadowOffsetX:1,
textShadowOffsetY:1,
}
},
},
data: [33, 45, 30, 23, 60, ]
},
{
name: '',
type: 'bar',
data: [100, 100, 100, 100, 100, ],
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, .1)',
},
},
z: 1
},
]
};