在使用echart绘制图表的过程中,y轴刻度标签显示不全

发布时间:2023年12月26日

项目场景:

在使用echart绘制图表的过程中,y轴刻度标签显示不全,效果如下图所示:
在这里插入图片描述


问题描述

在项目中使用echart绘制图表,y轴刻度标签显示不全,代码如下:

const getChartsData = () => {
      const myChart = echarts.init(document.getElementById('myChart123'))
      // 绘制图表
      const xData = state.arrHistoryList.map(item => {
        return item.valueDate
      })
      myChart.setOption({
        xAxis: {
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (value) {
              return value.toFixed(4)
            }
          },
          min: function (value) { return value.min.toFixed(4) },
          max: function (value) { return value.max.toFixed(4) }
        },
        series: [
          {
            name: t('app.InvestmentPrice.Uservolume'),
            type: 'line',
            data: state.arrHistoryList.map(item => {
              return item.unitSellPrice
            }),
            itemStyle: {
              normal: {
                color: '#E33122'
              }
            }
          }
        ]
      })
      window.onresize = function () { // 自适应大小
        myChart.resize()
      }
    }

原因分析:

起初以为yAxis里面的刻度标签函数编写有问题,检查了一下没有问题,就开始看是不是echart渲染位数有限制,发现也不是,最终发现时echart渲染偏移问题,导致y轴刻度标签显示不全。


解决方案:

grid: {
  // top:48,
  left: '20%' // 调整这个属性
},

效果如下:

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_51602285/article/details/135088859
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。