echarts柱状图只显示部分划线

Question

echarts在使用柱状图时，如何对Y轴的划线进行限制，我在show中写了一个方法，但是没有进入其中，这个如何修改，具体配置如下

const initChart = () => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);

  var option;
  option = {
    xAxis: {
      type: 'category',
      data: allData.xData,
    },
    yAxis: {
      type: 'value',
      position: 'right', // 将 Y 轴移动到右侧
      min: -1,
      max:100,
      splitNumber:100,
      splitLine: {
        // 修改 show 函数以返回布尔值
        show: function (index) {
          // 使用当前索引 index 来获取对应的刻度值
          var value = myChart.getOption().yAxis[0].axisLabel.data[index];
          console.log(value);
          // 遍历 allData.allProjectLevelList 来检查当前的刻度值是否对应一个标签
          for (let i = 0; i < allData.allProjectLevelList.length; i++) {
            if (allData.allProjectLevelList[i].levelScale == value) {
              return true; // 如果找到匹配的 levelScale，返回 true 显示分割线
            }
          }
          return false; // 如果没有找到匹配的 levelScale，返回 false 不显示分割线
        },
        lineStyle: {
          color: 'red', // 设置分割线的颜色
          type: 'dashed' // 设置分割线的类型
        }
      },
      axisTick: {
        show: false // 根据需要显示或隐藏刻度线
      },
      axisLabel: {
        interval:1,

        formatter: function (value:any, index:any) {
          // 这里可以自定义 Y 轴标签的显示格式
          for (let i = 0; i < allData.allProjectLevelList.length; i++) {

            if (allData.allProjectLevelList[i].levelScale == value){
              return allData.allProjectLevelList[i].levelName
            }
          }
          //return value + ' units'; // 假设你想要在数字后面加上单位
        }
      }
    },
    series: [{
      data: allData.subjectLevelList,
      type: 'bar'
    }]
  };

  option && myChart.setOption(option);
}

运行之后如下图

如何只显示与标题相对应的划线部分

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要解决这个问题，您需要在图表生成时，设置 y 轴范围为最大值和最小值之间的较小值，并且设置 x 轴范围为 "allData.xData"。接下来，我们来编写一个函数 showLine 来实现这一目标：

function showLine(index) {
  // 获取对应的刻度值
  var value = myChart.getOption().yAxis[0].axisLabel.data[index];

  // 当刻度值不等于 "allData.allProjectLevelList[0].levelName" 时，显示分割线
  if (value != allData.allProjectLevelList[0].levelName) {
    var width = myChart.getOption().xAxis.dataWidth;
    var startX = Math.min(allData.allProjectLevelList.map(function(item) { return item.levelScale; }));
    var endX = Math.max(allData.allProjectLevelList.map(function(item) { return item.levelScale; }));
    var line = myChart.getOption().axisTick.lineStyle;

    line.style.width = width + 'px';
    line.style.top = (endX - startX + 10) / 2 + 'px';
    line.style.left = (startX - 10 + width / 2) + 'px';

    if (myChart.getOption().yAxis[0].splitNumber > 50) {
      line.style.borderColor = 'blue';
    } else {
      line.style.borderColor = 'red';
    }

    myChart.getOption().axisTick.show = false;
  }
}

在这个函数中，首先获取图表的数据，并将它们作为参数传递给 myChart.getOption() 方法。然后，我们检查刻度值是否等于 "allData.allProjectLevelList[0].levelName"，如果相等，则仅显示柱状图的一半刻度线。

此外，在上面提到的方法的基础上，我们还需要更新 X 轴范围。我们需要计算最大值和最小值之间的较小值（例如 max - min) 并将其赋值给变量 width，以便于确定画线的位置。

最后，我们将画线的宽度、顶部位置和左侧位置设置成特定的值，并检查是否存在切线间隔，如果是则隐藏切线。当刻度值不等于 "allData.allProjectLevelList[0].levelName" 时，显示剩下的柱状图一半刻度线。

注意：这个示例假设您的数据是按项目级别存储的。如果您需要处理不同级别的数据，请相应地调整代码。同时，您可以根据实际需求更改 showLine 函数中的条件语句以满足其他需求。