const chart1Data = [
{
type:'土建设施',
count:2
},
{
type:'土建设施2',
count:12
},
{
type:'土建设施3',
count:22
},
{
type:'土建设施4',
count:5
},
{
type:'土建设施5',
count:10
},
]
option = {
backgroundColor: "#000000",
tooltip: {
trigger: "axis",
backgroundColor: "#000000",
borderColor: "#000000",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// },
textStyle: {
color: "#fff"
},
confine: true
},
grid: [
{
top: '10', //上边距
bottom: '0%',
right: '10%',
left: '6%',
containLabel: true
},
{
top: '10', //上边距
bottom: '0%',
right: '10%',
left: '6%',
containLabel: true
},
],
xAxis: [
{
type: "value",
minInterval: 1,
gridIndex: 0,
splitNumber: 4,
show: false,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.1000)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(197, 225, 255, 0.1)",
width: 1,
type: "dashed"
}
},
axisTick: {
show: false,
inside: true,
lineStyle: {
color: '#10899A',
fontSize: '12',
}
},
axisLabel: {
formatter: (params) => {
return '{marginTop|' + params + '}';
},
rich: {
marginTop: {
padding: [0, 0, 0, 0],
color: 'rgba(197, 225, 255, 1)',
fontSize: 12,
}
}
},
},
{
type: "value",
splitNumber: 3,
max: Math.max(...chart1Data.map(item => item.count)),
gridIndex: 1,
inverse: true,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.1000)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(197, 225, 255, 0.1)",
width: 1,
type: "dashed"
}
},
axisTick: {
show: false,
},
axisLabel: {
formatter: (params) => {
return '{marginTop|' + params + '}';
},
rich: {
marginTop: {
padding: [0, 0, 0, 0],
color: 'rgba(197, 225, 255, 1)',
fontSize: 12,
}
}
},
},
],
yAxis: [
{
gridIndex: 0,
position: 'left',
data: [],
nameTextStyle: {
color: 'rgba(197, 225, 255, 1)',
padding: [0, 0, 0, 0],
fontSize: '9',
},
axisLabel: {
formatter: (params) => {
return '{marginTop|' + params + '}';
},
// margin: 10,
rich: {
marginTop: {
padding: [0, 0, 0, 0],
color: 'rgba(197, 225, 255, 1)',
fontSize: '9',
}
}
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#10899A'
}
},
splitLine: {
show: false,
}
},
{
gridIndex: 1,
data: chart1Data.map((item) => item.type),
position: 'right',
nameTextStyle: {
color: 'rgba(197, 225, 255, 1)',
padding: [0, 0, 0, 0],
fontSize: '9',
},
// top: 12,
axisLabel: {
show: true,
formatter: (params) => {
return '{marginTop|' + params + '}';
},
rich: {
marginTop: {
padding: [0, 0, 0, 0],
color: 'rgba(197, 225, 255, 1)',
fontSize: '9',
}
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.1000)"
}
},
splitLine: {
show: false,
}
},
],
series: [
{
name: '设备数量',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: "#00D2FF"
},
{
offset: 0,
color: "#0075DD"
}
],
global: false
},
borderRadius: 4
},
barWidth: 3,
data: chart1Data.map((item) => item.count),
},
]
};