echarts折线图设置不均匀刻度，不等距轴的解决方案

问题： 在y轴为数值轴且有部分数据相差过大时，因为y轴等距的缘故，会形成以下图表，显示效果不佳。
x轴数据：var xData = ['敌法师','幻影刺客','虚空假面','恐怖利刃','猛犸颠勺者'];
y轴数据：var yData = [20, 35, 67, 88, 1000];

解决方案：

1. 将y轴数据每一项开立方根，使得数据之间的差距缩小，将得到的数组用于echarts。

data: yData.map(i=>Math.cbrt(i))

2. 经过第一步，页面的图形效果已经改变，此时y轴和悬浮窗数据为开立方后的结果，我们先处理y轴上的数据。

formatter:function(value){ 
 return value*value*value
}

3.这时处理悬浮框上的数据。

formatter: function(params){
  return params[0].name + '<br>' + yData[params[0].dataIndex]
}

此时y轴不等距就形成了，图表显示效果比之前好了很多。(都看到这里了，不妨点个赞吧！)

完整代码如下：

var xData = ['敌法师','幻影刺客','虚空假面','恐怖利刃','猛犸颠勺者'];
var yData = [20, 35, 67, 88, 1000];
var option_1 = {
  grid:{ //图表离外层盒子的距离
    x: 10,
    y: 30,
    x2: 40,
    y2: 10,
    containLabel: true
  },
  tooltip: { //悬浮窗与axisPointer
    trigger: 'axis',
    transitionDuration: 1, //提示框浮层的移动动画过渡时间
    confine: true, //是否将 tooltip 框限制在图表的区域内
    formatter: function(params){
      //name:类目轴数据，value：数值轴数据, dataIndex：数据的索引
      return params[0].name + '<br>' + yData[params[0].dataIndex]
      // return params[0].name + '<br>' + params[0].value
    },
    axisPointer: {
      type: 'line',
      axis: 'x',
      snap: true, //axisPointer自动吸附到最近的点上
    }
  },
  xAxis: {
    type: 'category',
    data: xData,
    name: '英雄',
    boundaryGap: 0,
    nameTextStyle: {
      color: '#ffffff',
      fontFamily: 'Microsoft YaHei',
      fontSize: 12,
    },
    nameGap: 8,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ffffff',
        width: 1
      }
    },
  },
  yAxis: {
    type: 'value',
    name: '伤害',
    splitNumber: 5,
    nameGap: 8,
    nameTextStyle: {
      color: '#ffffff',
      fontFamily: 'Microsoft YaHei',
      fontSize: 12,
    },
    boundaryGap: [0,'10%'],
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ffffff',
        width: 1
      }
    },
    splitLine: {
      lineStyle :{
        color: '#ffffff',
        opacity: 0.2
      }
    },
    axisLabel: {
      margin: 5,
      textStyle: {
        fontSize: 12,
      },
      formatter:function(value){ 
        return value*value*value
        // return value
      }
    },
    axisTick:{
      show: false
    }
  },
  series: [{
    data: yData.map(i=>Math.cbrt(i)),
    // data: yData,
    type: 'line',
    smooth: 0.1,
    symbol: 'none',
    lineStyle: {
      color: '#1655D2',
      type: 'solid',
      width: 0,
    },
    areaStyle: { //图表所占区域样式
      opacity: 0.9,
      color: { //图表颜色
        x0: 0, y0: 0, x2: 1, y2: 0, //方向
        type: 'linear',
        colorStops: [{ //图表颜色区域划分
          offset: 0, color: '#ff6c57' // 0% 处的颜色
        }, {
          offset: 0.3, color: '#ffa43e' 
        },{
          offset: 0.3, color: '#00a8ff'
        },
          {
            offset: 0.6, color: '#39fff3'
          },{
            offset: 0.6, color: '#c2ff31'
          {
            offset: 1, color: '#75dba9' // 100% 处的颜色
          }]
      }
    }
  },
  ]
};
echarts.init(myChart[0]).setOption(option_1);