const dataList = [
{
xx: "啊啊啊",
yy: 901
},
{
xx: "哈哈哈",
yy: 501
},
{
xx: "哦哦哦",
yy: 102
},
{
xx: "嗯嗯嗯",
yy: 389
}
]
const xData = dataList.map(i => i.xx)
const yData = dataList.map(i => i.yy)
const TopData = ['TOP1', 'TOP2', 'TOP3', 'TOP4']
option = {
backgroundColor: "#4488BE",
grid: {
top: 30,
left: 20,
right: 30,
bottom: 20,
containLabel: true
},
legend: {
show: false
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
show: true,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisTick: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
type: 'solid'
}
},
axisLabel: {
show: false,
inside: false,
interval: 0,
rotate: 0,
color: '#fff',
fontWeight: 400,
fontSize: 12,
margin: 10
}
},
yAxis: [
{
type: 'category',
data: xData,
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(155, 155, 155, 0.6)',
type: 'dashed'
}
},
axisLabel: {
color: '#333',
fontWeight: 400,
fontSize: 14,
rich: {
a: {
width: 50,
height: 28,
align: 'center',
color: '#fff',
fontSize: 14,
borderRadius: 26,
padding: [0, 0, 0, 0],
backgroundColor: {
colorStops: [
{
offset: 0,
color: 'rgba(253, 209, 31, 1)'
},
{
offset: 0.38,
color: 'rgba(248, 210, 39, 0.44)'
},
{
offset: 0.74,
color: 'rgba(247, 210, 40, 0.20)'
},
{
offset: 1,
color: 'rgba(247, 210, 41, 0.10)'
}
]
}
},
a1: {
width: 50,
height: 28,
align: 'center',
color: '#fff',
fontSize: 14,
borderRadius: 26,
padding: [0, 0, 0, 0],
backgroundColor: {
colorStops: [
{
offset: 0,
color: 'rgba(58, 133, 206, 1)'
},
{
offset: 0.38,
color: 'rgba(107, 174, 244, 0.44)'
},
{
offset: 0.74,
color: 'rgba(17, 125, 237, 0.20)'
},
{
offset: 1,
color: 'rgba(17, 125, 237, 0.10)'
}
]
}
}
},
formatter: (name, index) => {
if (index === 0) {
return '{a|' + TopData[index] + '}'
} else {
return '{a1|' + TopData[index] + '}'
}
}
}
},
{
data: yData,
yAxisIndex: 1,
inverse: true,
type: 'category',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 0,
interval: 0,
inside: true,
padding: [0, 2, 8, 0],
color: '#fff',
fontSize: 14,
align: 'right',
verticalAlign: 'bottom',
formatter: function (value, index) {
return value
}
}
}
],
series: [
{
z: 10,
type: 'bar',
barWidth: 10,
data: yData,
silent: true,
showBackground: true,
itemStyle: {
normal: {
barBorderRadius: 8,
color: {
type: 'linear',
x: 1, // 右
y: 0, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 1,
color: '#EAC030'
},
{
offset: 0,
color: '#03D8FA'
}
]
}
}
},
label: {
normal: {
color: '#333',
show: true,
position: [4, -18],
textStyle: {
fontSize: 26,
color: '#333'
},
rich: {
a: {
fontSize: 14,
color: '#fff',
align: 'center',
verticalAlign: 'middle'
}
},
formatter: params => {
return '{a|' + params.name + '}'
}
}
},
backgroundStyle: {
color: '#204879',
borderRadius: 8
}
}
]
};