Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

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

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轴与我标记对点对不上呀


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
 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'
    }]
};

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...