echart 散点图x轴标记的点偏移，对不上

• Z时代
• 2024-01-10
• 分类：技术分享

echart 散点图x轴标记的点偏移，对不上

题目来源及自己的思路

相关代码

 XlineData= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
YlineData= ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100']
option = {
xAxis: {
name: 'x:月份',
type: 'category',
data: XlineData.map((seg, idx) => {
return seg
}),
textStyle: {
color: '#8090A9',
fontsize: '11px'
},
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: '#979797',
type: 'dotted'
},
label: {
show: true
}
},
axisTick: {
show: false,
alignWithLabel:false,
inside:false,
length:5,
},
axisLabel: {
formatter: function(params) {
return params
},
margin: 30
},
boundaryGap: false,
},
yAxis: {
type: 'category',
name: 'y:能量强度',
nameLocation: 'end',
nameTextStyle: {
align: 'center',
verticalAlign: 'bottom'
},
boundaryGap: false,
data: this.YlineData,
textStyle: {
color: '#8090A9',
fontsize: '11px'
},
axisLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true
},
splitLine: {
show: true,
lineStyle: {
color: '#979797',
type: 'dotted'
}
},
splitArea: {
areaStyle: {
shadowOffsetX: {
step: 100
}
}
},
axisLabel: {
formatter: function(params) {
return params + '%'
},
margin: 20
}
},
series: [
{
symbolSize: 10,
data: [
[1, 2.5]
],
type: 'scatter'
}]
};

为什么x和y轴与我标记对点对不上呀

回答

 let XlineData= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
let YlineData= [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
   xAxis: {
          name: 'x:月份',
          type: 'category',
          data: XlineData,
          textStyle: {
            color: '#8090A9',
            fontsize: '11px'
          },
          axisLine: {
            show: true,
            onZero: true,
            lineStyle: {
              color: '#979797',
              type: 'dotted'
            },
            label: {
              show: true
            }
          },
          axisTick: {
            show: false,
            alignWithLabel:false,
            inside:false,          
            length:5,         
          },
          axisLabel: {
            formatter: function(params) {
              return params
            },
            margin: 30
          },
          boundaryGap: false,
        },
    yAxis: {
          type: 'category',
          name: 'y:能量强度',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'center',
            verticalAlign: 'bottom'
          },
          boundaryGap: false,
          data: YlineData,
          textStyle: {
            color: '#8090A9',
            fontsize: '11px'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#979797',
              type: 'dotted'
            }
          },
          splitArea: {
            areaStyle: {
              shadowOffsetX: {
                step: 100
              }
            }
          },
          axisLabel: {
            formatter: function(params) {
              return params + '%'
            },
            margin: 20
          }
        },
    series: [
      {
        data: [
            0, 1, 3, 4
        ],
        type: 'scatter'
    }]
};

以上是 echart 散点图x轴标记的点偏移，对不上 的全部内容， 来源链接： utcz.com/a/36577.html