let seriesData = [
{ name: '北京', value: 100 },
{ name: '上海', value: 90 },
{ name: '广州', value: 80 },
{ name: '天津', value: 70 },
{ name: '山东', value: 60 },
{ name: '江苏', value: 50 },
{ name: '安徽', value: 40 },
]
option = {
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#011432' // 0% 处的颜色
}, {
offset: 1, color: '#021A40' // 100% 处的颜色
}],
global: false // 缺省为 false
},
tooltip: {
show: true,
trigger: 'item',
padding: [8, 15],
backgroundColor: 'rgba(12, 51, 115,0.8)',
borderColor: 'rgba(3, 11, 44, 0.5)',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 22,
},
},
legend: {
show: false,
},
grid: {
left: '2%',
right: '5%',
top: '6%',
bottom: '2%',
},
xAxis: [
{
splitLine: {
show: false,
},
type: 'value',
show: false,
axisLine: { //x轴坐标轴，false为隐藏，true为显示
show: false
},
},
],
yAxis: [
{
show: true,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
type: 'category',
axisTick: {
show: false,
},
inverse: true,
data: [1, 2, 3, 4, 5, 6, 7],
axisLabel: {
show: false,
},
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
position: "right",
axisLabel: {
inside: true,
verticalAlign: 'bottom',
lineHeight: 25,
margin: 0, //刻度标签与轴线之间的距离
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 15,
},
formatter: function (value) {
return value ;
},
},
data: [100, 90, 80, 70, 60, 50, 40],
},
],
series: [
{
show: true,
name: '',
type: 'bar',
data:seriesData,
barWidth: 15, // 柱子宽度
showBackground: true,
backgroundStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(5, 31, 81, 1)",
},
{
offset: 1,
color: "rgba(21, 78, 138, 1)",
},
],
}
},
label: {
show: true,
offset: [5, -15],
color: 'rgba(255, 255, 255, 1)',
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 15,
fontWeight: 500,
position: 'left',
align: 'left',
formatter: function (params) {
return params.data.name;
}
},
itemStyle: {
// barBorderRadius: [10, 10, 10, 10],
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(27, 54, 167, 0.33)",
},
{
offset: 1,
color: "rgba(225, 48, 6, 1)",
},
],
}
}
},
],
};