You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用ECharts JS绘制图表报Bind must be called on a function错误

报错原因

触发Bind must be called on a function报错的核心问题是数据集配置错误:
你在循环生成过滤数据集时,给fromDatasetId字段传入了接口返回的原始数据变量sens_data_result,但该字段仅接受已注册的数据集ID字符串作为值。ECharts内部无法通过这个非ID值匹配到上游原始数据集,后续逻辑拿到非法值执行函数绑定操作时直接抛出类型错误。

修复方案
  1. 将所有过滤数据集的fromDatasetId值改为你在最外层dataset中定义的原始数据源ID:dataset_sens_names
  2. 按需校验endLabel.formatter的字段取值逻辑,确认你的源数据行索引和字段对应关系正确,避免标签显示异常。
修正后完整代码
let domTemp = document.getElementById("main");
let mytempChart = echarts.init(domTemp, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};
var option;

runDaysDatas(sens_data_result, sens_name_list);
function runDaysDatas(sens_data_result, sens_name_list) {
  
    const sens_names = sens_name_list;
    
    const datasetWithFilters = [];
    const seriesList = [];
    echarts.util.each(sens_names, function (sens) {
      var datasetId = 'dataset_' + sens;
      datasetWithFilters.push({
        id: datasetId,
        // 修复:这里填写上游原始数据集的ID字符串,而非原始数据变量
        fromDatasetId: 'dataset_sens_names',
        transform: {
          type: 'filter',
          config: {
            and: [
              { dimension: 'Uid', '=': sens }
            ]
          }
        }
      });
      seriesList.push({
        type: 'line',
        datasetId: datasetId,
        showSymbol: false,
        name: sens,
        endLabel: {
          show: true,
          formatter: function (params) {
            // 按需调整value索引,确保和你的源数据字段顺序匹配
            return params.value[3] + ': ' + params.value[0];
          }
        },
        labelLayout: {
          moveOverlap: 'shiftY'
        },
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'Date',
          y: 'Temperature',
          label: ['Name', 'Temperature'],
          itemName: 'Date',
          tooltip: ['Temperature']
        }
      });
    });
    option = {
      animationDuration: 10000,
      dataset: [
        {
          id: 'dataset_sens_names',
          source: sens_data_result
        },
        ...datasetWithFilters
      ],
      title: {
        text: 'Temperature for Day'
      },
      tooltip: {
        order: 'valueDesc',
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        nameLocation: 'middle'
      },
      yAxis: {
        name: 'Temperature'
      },
      grid: {
        right: 140
      },
      series: seriesList
    };
    mytempChart.setOption(option);
}
补充说明
  • 如果修正后仍有渲染异常,优先检查sens_data_result的数据格式:需要是ECharts dataset支持的数组格式(要么是对象数组,键名和encode配置的Date/Temperature/Uid/Name对应;要么是二维数组,首行为字段名,后续行对应数据顺序)。
  • 数据集transform能力是ECharts 5.0新增特性,如果你的ECharts版本低于5.0.0,请先升级版本后再调试。

内容的提问来源于stack exchange,提问作者Evgeniy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.03 06:06:31