使用ECharts JS绘制图表报Bind must be called on a function错误
报错原因
触发Bind must be called on a function报错的核心问题是数据集配置错误:
你在循环生成过滤数据集时,给fromDatasetId字段传入了接口返回的原始数据变量sens_data_result,但该字段仅接受已注册的数据集ID字符串作为值。ECharts内部无法通过这个非ID值匹配到上游原始数据集,后续逻辑拿到非法值执行函数绑定操作时直接抛出类型错误。
修复方案
- 将所有过滤数据集的
fromDatasetId值改为你在最外层dataset中定义的原始数据源ID:dataset_sens_names - 按需校验
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
相关产品推荐
相关产品推荐

