美文网首页
针对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