var x=[45,55,47,32,55,85,15]
var max = x[0];//获取后端传入x轴最大数据
for (var i = 0; i < x.length; i++) {//取最大值
if (x[i] > max) {
max = x[i];
}
}
var newXdata = []
var newYdata=[]
for (var j = 0; j <= formatRoundNum(max); j++) {//生成数组
newXdata.push(j)
newYdata.push("")
}
// 设置间隔
var interval=0
if(max<=100){
interval=9
}else if(max<=500){
interval=49
}else if(max<=1000){
interval=99
}else if(max<=2000){
interval=499
}else if(max<=5000){
interval=999
}else if(max<=10000){
interval=9999
}
var y=[12,121,55,99,23,45,200]
// 循环生成y轴占位数据
// var newddd=[]
// this.xDatas = [2, 8, 12]
// ["", "", 6, "", "", "", "", "", 9, "", "", "", 13, "", "", "", "", "", "", "", ""]
for (var a = 0; a < x.length; a++) {
newYdata[x[a]] = y[a]
}
function formatRoundNum(num) {
let integer = Math.ceil(num)
let length = String(integer).length
console.log(length);
return Math.ceil(integer / Math.pow(10, length - 1)) * Math.pow(10, length - 1)
// *Math.pow(10,length-1)
}
option = {
title: {
text: '动态x轴与y轴',
},
xAxis: [
{
// 顶部x轴
gridIndex: 0,
type: 'category',
// max: 1630252800000,
// min: 1629734400000,
position: 'top',
axisTick: { show: true },
splitLine: {
show: false,
},
axisLabel: {
// interval: 0,
interval: interval,
rotate: 0,
color: "rgba(23, 26, 29, 1)",
fontSize: 14,
},
axisLine: {
show: true,
},
boundaryGap: false, // 取消坐标轴两边留白
// data:x
data:newXdata
},
],
yAxis: [
{
name: '厚度',
nameTextStyle: {
align: 'center'
},
nameLocation: 'end',
gridIndex: 0,
type: 'value',
inverse: true,
axisTick: { show: false },
splitLine: {
show: false,
},
axisLine: {
show: true,
},
},
],
series: [
{
name: '厚度',
type: 'bar',
symbol: 'circle',
symbolSize: 6,
// xAxisIndex: 0,
// yAxisIndex: 0,
barWidth: 5, // 柱宽
color: "#146fd7",
label: {
normal: {
show: true,
position: 'bottom',
fontSize: 15,
color: '#0B9FC7',
offset: [0, 10]
}
},
data:newYdata
},
{
type: "scatter",
symbolSize: 8,
itemStyle: {
borderWidth: 2.5,
borderColor: "#146fd7",
color: "#146fd7",
opacity: 1,
},
silent: true,
markLine: {
symbol: ["none", "none"],
data: [
{
name: "平均数",
yAxis: 40,
lineStyle: { type: "solid", color: "red", width: 1 }, // 样式： 线型、颜色、线宽
},
],
},
data: newYdata
},
],
};