echarts双y轴两边刻度线不一致问题

1.需要用到的属性 min max splitNumber interval

2.设置刻度分割的数目 splitNumber 

3.通过最大值最小值计算柱子分割的间距 interval(max-min)/splitNumber

4.部分代码及效果图

// 计算最大值
    _calcMaxNumber(arr){
      let max = Math.max(...arr);
      let maxInt = Math.ceil(max/9.5);
      let maxVal = maxInt*10;
      return maxVal;
    },
    // 计算最小值
    _calcMinNumber(arr){
      let min = Math.min(...arr);
      let minInt = Math.floor(min/10);
      let minVal = minInt*10;
      return minVal;
    }
// 省略部分代码
let uvMax = this._calcMaxNumber(this.uvDet);
        let uvMin = this._calcMinNumber(this.uvDet);
        let cliMax = this._calcMaxNumber(this.cliDet);
        let cliMin = this._calcMinNumber(this.cliDet);
        this.initBar(this.cliDet, this.uvDet,uvMax,uvMin,cliMax,cliMin);
// 省略部分代码
initBar(dataCli, uvDet,uvMax,uvMin,cliMax,cliMin){
 // echarts配置
 yAxis: [
          {
            type: "value",
            name: "uv",
            position: "left",
            min:uvMin,
            max:uvMax,
            splitNumber:5,
            interval:(uvMax-uvMin)/5,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              },
              formatter: function(v) {
                return v;
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            }
          },
          {
            type: "value",
            name: "cli",
            position: "right",
            axisLine: {
              show: false
            },
            min:cliMin,
            max:cliMax,
            splitNumber:5,
            interval:(cliMax-cliMin)/5,
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              },
              formatter: function(v) {
                return v;
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            }
          }
        ],
}

解决后的效果图

echarts双y轴两边刻度线不一致问题_第1张图片echarts双y轴两边刻度线不一致问题_第2张图片

你可能感兴趣的:(前端,移动端,h5,echarts,vue,js)