echarts图表，实用小技巧积累。柱形图数据过多；数据差距过大；双y轴0刻度对齐

echatrs实用小技巧

1.柱形图。数据过多，显示拥挤。

解决方法：实用dataZoom属性，使图标可左右拖动。

  draw = () => {
    let dataArr = []
    for (let i =0;i<20;i++){
      dataArr.push({label:i+'组',value:i*10})
    }
    let endValue = 100; //这里一定要注意不显示滚动条的时候一定要把滚动条结束位置设置一下，不然会有bug
    if (dataArr.length > 7) {
      //this.xData是横轴的数据，通过后台动态获取的
      endValue = (7 / dataArr.length) * 100;
    }
    let option = {
      dataZoom: [
        {
          orient: 'horizontal',
          type: 'inside',
          show: false, //控制滚动条显示隐藏
          realtime: true, //拖动滚动条时是否动态的更新图表数据
          height: 25, //滚动条高度
          start: 0, //滚动条开始位置（共100等份）
          end: endValue, //滚动条结束位置
          bottom: '4%',
          zoomLock: true, //控制面板是否进行缩放
        },
      ],
      xAxis: {
        type: 'category',
        data: dataArr?.map(item => item?.label),
        axisLabel: {
          //坐标轴刻度标签的显示间隔，默认会采用标签不重叠的策略间隔显示标签,可以设置成 0 强制显示所有标签。
          interval: 0
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: dataArr?.map(item => item?.value),
          type: 'bar'
        }
      ]
    };
    let sunChart =echarts.init(this.chartsRef.current);
    sunChart.setOption(option)
  }

2.ecahts柱形图数据差距过大。

解决方法：在对应的y轴设置type:‘log’。‘log’ 对数轴。适用于对数数据。

     yAxis: {
     //可根据数据实际情况对min和logBase进行调整以解决出现的数据持平的情况。
         min:1, //坐标轴刻度最小值。
         logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效。
         type: 'log'
      },

原理可以看一下对数函数坐标图。

3.双y轴0刻度对齐。
当数据中有负数的时候，会出现y轴的0刻度对不齐的情况（这个真的困扰我好久）

解决办法：直接上代码，主要就是要算出两个y轴的min和max的值。

  draw = () => {
    const data1 = [1000,100,500,600,-300]
    const data2 = [20,-80,40,20,-10]
    let max1 = Math.max(...data1) || 1;
    let max2 = Math.max(...data2) || 1;
    let min1 = Math.min(...data1) || 0;
    let min2 = Math.min(...data2) || 0;
    const ratio = (max1 - min1) / (max2 - min2);
    let y1Max, y2Max, y1Min, y2Min;
    if (max1 < max2 * ratio) {
      y1Max = max2 * ratio;
      y2Max = max2;
    } else {
      y1Max = max1;
      y2Max = max1 / ratio;
    }
    if (min1 < min2 * ratio) {
      y1Min = min1;
      y2Min = min1 / ratio;
    } else {
      y1Min = min2 * ratio;
      y2Min = min2;
    }
    let option = {
      xAxis: {
        type: 'category',
        data: ['数据1','数据2','数据3','数据4','数据5'],
        axisLabel: {
          //坐标轴刻度标签的显示间隔，默认会采用标签不重叠的策略间隔显示标签,可以设置成 0 强制显示所有标签。
          interval: 0
        }
      },
      yAxis: [
        {
          show: true,
          splitLine: {
            show: false,
          },
          min: y1Min,
          max: y1Max,
        },
        {
          show: true,
          splitLine: {
            show: false,
          },
          min: y2Min,
          max: y2Max,
        },
      ],
      series: [
        {
          data: data1,
          type: 'bar',
          label:{
            show: true
          },
          yAxisIndex: 0,
        },
        {
          data: data2,
          type: 'bar',
          label:{
            show: true
          },
          yAxisIndex: 1,
        }
      ]
    };
    let sunChart =echarts.init(this.chartsRef.current);
    sunChart.setOption(option)
  }

结果如图