问答

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

作者:admin 2021-06-10 我要评论

echart 散点图x轴标记的点偏移,对不上 题目来源及自己的思路 相关代码 XlineData= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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'
    }]
};

image.png

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • echart 散点图x轴标记的点偏移,对不上

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

  • ant-design-vue修改导航栏颜色和布局出

    ant-design-vue修改导航栏颜色和布局出

  • 超级计算机与一般的云计算有什么区别,

    超级计算机与一般的云计算有什么区别,

  • echarts 3D地图绘制显示不完全的问题

    echarts 3D地图绘制显示不完全的问题

腾讯云代理商
海外云服务器