美文网首页
针对echarts yAxis type为value类型时,数据

针对echarts yAxis type为value类型时,数据

作者: 幸宇 | 来源:发表于2022-10-19 16:00 被阅读0次

    针对echarts yAxis type为value类型时,数据过大和过小显示问题

    问题描述

    当echarts中折线图展示时,数据中有很大的情况比如15000,也有很小的情况展现比如4,当数据比较分散在极端值时,会造成极小值看不到起伏的情况,让用户误以为没有值。
    

    解决办法

    采用log指数型展示,缺点是:10的指数没有0的情况,如果数据中出现0或者小于0的情况,不太好处理,但也可以解决;
    

    1-初始化数据有0的情况,为0.1。

    getlinsData(res_lines, model, pname, name) {
          if (pname && name) {
            res_lines.forEach((item) => {
              model.push({
                name: item.model,
                // 修改地方
                data: item[pname][name] === 0?0.1:item[pname][name],
                date: item.begin_time,
                begin_time: item.begin_time,
                end_time: item.end_time
              })
            })
            let isnull = model.every((item) => item.data === 0)
            if (isnull) {
              this.optionStyle.yAxis.max = 100
            } else {
              this.optionStyle.yAxis.max = null
            }
          }
          
        },
    

    2-然后去y轴自定义formatter,把0.1的值换成0

     yAxis: {
              show: true,
              type: 'value',
              max: 100,
              nameTextStyle: {
                color: '#999',
                fontSize: 12,
                padding: [0, 0, 0, 0] // 调整Y轴
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#eee',
                  type: 'solid'
                }
              },
              axisLabel: {
                show: true,
                color: '#666',
                fontWeight: 400
                // 处理0.1显示问题
                formatter: function(value) {
                    if(value===0.1){
                        return 0
                    }else{
                        return value
                    }
                }
              },
              axisTick: { show: false },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#eee'
                }
              }
            },
    

    相关文章

      网友评论

          本文标题:针对echarts yAxis type为value类型时,数据

          本文链接:https://www.haomeiwen.com/subject/fwwezrtx.html