Grafana Business Echarts中基于数值修改柱状图颜色时使用RUN变量报错的问题

看起来你遇到的问题根源其实是RUN变量的类型不对，咱们一步步来理清楚：

问题出在哪？ #

你从WO_INFO的series里获取RUN值的时候，s.fields.find((f) => f.name === 'RUN').values返回的是数组类型，而不是你需要的单个数值：

• 你在label里用"<= " + RUN的时候，JS会自动把数组转成字符串（比如如果RUN数组是[8]，就会变成"8"），所以表面上看起来正常；
• 但在visualMap的gte/lt这些需要纯数值的配置项里，你直接传了数组，ECharts内部处理数值范围逻辑时，会把数组当成非有效数值，就会抛出e.indexOf is not a function这种莫名其妙的错误。

怎么解决？ #

我们需要把RUN从数组提取成单个数值，还要转成数字类型，同时修正visualMap里的硬编码数值，改成动态的RUN值：

步骤1：修正RUN的赋值逻辑

把原来的RUN赋值代码：

RUN = s.fields.find((f) => f.name === 'RUN').values;
RUN_PLUS = s.fields.find((f) => f.name === 'RUN_PLUS').values;

改成：

// 提取数组第一个元素并转成数字（假设WO_INFO查询返回单个RUN值）
RUN = Number(s.fields.find((f) => f.name === 'RUN')?.values?.[0] || 0);
RUN_PLUS = Number(s.fields.find((f) => f.name === 'RUN_PLUS')?.values?.[0] || 0);

这里用了?.可选链操作符和|| 0的默认值，是为了防止查询没返回数据时出现报错。

步骤2：修正visualMap的数值范围

把原来硬编码的5改成动态的RUN值：

visualMap: [{
  pieces: [{
    gte: RUN, // 改成>= RUN
    label: ">= " + RUN,
    color: "green"
  }, {
    lt: RUN, // 改成< RUN
    gt: 0,
    label: "< " + RUN,
    color: "red"
  }],
}],

修改后的完整代码

let AVG_RATE_PER_HOUR = [];
let FullName = [];
let RUN = 0;
let RUN_PLUS = 0;

context.panel.data.series.map((s) => {
  if (s.refId === "AVG_RATE") {
    AVG_RATE_PER_HOUR = s.fields.find((f) => f.name === 'AVG_RATE_PER_HOUR').values;
    FullName = s.fields.find((f) => f.name === 'FullName').values;
  } else if (s.refId === "WO_INFO") {
    // 提取单个数值并转成数字，加默认值防止报错
    RUN = Number(s.fields.find((f) => f.name === 'RUN')?.values?.[0] || 0);
    RUN_PLUS = Number(s.fields.find((f) => f.name === 'RUN_PLUS')?.values?.[0] || 0);
  }
});

return {
  xAxis: {
    type: 'category',
    data: FullName
  },
  yAxis: {
    type: 'value'
  },
  visualMap: [{
    pieces: [{
      gte: RUN,
      label: ">= " + RUN,
      color: "green"
    }, {
      lt: RUN,
      gt: 0,
      label: "< " + RUN,
      color: "red"
    }],
  }],
  series: [
    {
      data: AVG_RATE_PER_HOUR,
      label: {
        show: true,
        position: 'top',
        formatter: function (data) {
          return (data.value.toFixed(2))
        }
      },
      type: 'bar'
    }
  ]
};

额外说明 #

• 如果你不确定WO_INFO是否一定返回单个RUN值，可以加个判断，比如if (s.fields.find((f) => f.name === 'RUN')?.values?.length > 0) RUN = Number(RUN[0])，不过一般这类聚合查询都是返回单个值的；
• 这样修改后，visualMap的颜色判断就会基于动态的RUN值来生效，再也不会出现类型错误啦！

备注：内容来源于stack exchange，提问作者Eric