echarts数据差距过大

思路：在图形整体趋势不变的情况下，需从技术手段由大数据视图更改为小数据视图，思来想去也就在数据赋值的时候去开方，formatter数据展示时平方，来改变用户体验上的差异

初始数据：

let data = [10, 20, 36, 10, 10, 500]

初始数据视图如下：

开方及平方处理：

​
renderBar: function () {
  let myBar = echarts.init(document.getElementById('myBar'))
  let data = [10, 20, 36, 10, 10, 500]
  let sqrtData = []
  for (let i = 0; i < data.length; i++) {
    sqrtData.push(Math.sqrt(data[i]))
  }
  myBar.setOption({
    title: {text: '数据差异过大处理'},
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#FFFFFF',
      textStyle:{
        color: '#333333',
      },
      extraCssText: 'box-shadow: 0px 9px 9px 0px rgba(41, 53, 87, 0.22);',
      formatter(params) {
        let list = []
        let listItem = ''
        for (let i = 0; i < params.length; i++) {
        list.push(
             '<i style="display: inline-block;margin-top: 20px;width: 10px;height: 10px;background: ' +
              params[i].color +
              ';margin-right: 15px;border-radius: 50%;}"></i><span style="display:inline-block;">' +
              params[i].seriesName + '&nbsp:' +
              '</span>&nbsp&nbsp' +
              Math.pow(params[i].value, 2).toFixed(2)
          )
        }
        list.unshift(params[0].axisValue)
        listItem = list.join('<br>')
        return '<div style="padding: 20px 30px">' + listItem + '</div>'
      },
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter(value) {
          return Math.pow(value, 2)
        }
      }
    },
    series: [{
      name: '销量',
      type: 'bar',
      data: sqrtData
    }]
  });
}

​

 处理完成效果图：

作者在这里只是提供诸多解决方案中的一种，如果有不同方法的道友欢迎前来交流