Cuando intento dibujar un gráfico, aparece un error: echarts.min.js:45 Uncaught TypeError: Bind must be called on a function at bind (<anonymous>) at Bd (echarts.min.js:45:130031)
Mi echarts-init.js:
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, fromDatasetId: sens_data_result, transform: { type: 'filter', config: { and: [ { dimension: 'Uid', '=': sens } ] } } }); seriesList.push({ type: 'line', datasetId: datasetId, showSymbol: false, name: sens, endLabel: { show: true, formatter: function (params) { 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); }En sens_data_result paso datos de api. En sens_name_list paso los nombres de los sensores.
La consola no manda errores a mi script, jura en la biblioteca. Tomé un ejemplo del sitio oficial y lo rehice para mi tarea, mostrando la temperatura por hora del día con el nombre del sensor. Puede haber N número de gráficos en un gráfico.
¡Gracias por la ayuda!
Okey, he resuelto el problema, esta es la decisión:
let url = '/api/sensdata'; let domTemp = document.getElementById("main"); let mytempChart = echarts.init(domTemp, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; $.get( url, sensors_uid, (_rawData) => { runDaysDatas(_rawData, sens_name_list); } ); function runDaysDatas(_rawData, sens_names) { const datasetWithFilters = []; const seriesList = []; _rawData.unshift(['Name', 'Date', 'Humidity', 'Temperature']); echarts.util.each(sens_names, function (sens) { var datasetId = 'dataset_' + sens; datasetWithFilters.push({ id: datasetId, fromDatasetId: 'dataset_raw', transform: { type: 'filter', config: { and: [ { dimension: 'Name', '=': sens } ] } } }); seriesList.push({ type: 'line', datasetId: datasetId, showSymbol: false, name: sens, endLabel: { show: true, formatter: function (params) { return 'Uid ' + params.value[0] + ': ' + params.value[3] + '°C'; } }, labelLayout: { moveOverlap: 'shiftY' }, emphasis: { focus: 'series' }, encode: { x: 'Date', y: 'Temperature', label: ['Name', 'Temperature'], itemName: 'Temperature', tooltip: ['Temperature'] }, }); }); console.log(seriesList); option = { toolbox: { show : true, feature : { magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, legend: {}, dataset: [ { id: 'dataset_raw', source: _rawData }, ...datasetWithFilters ], tooltip: { order: 'valueDesc', trigger: 'axis' }, xAxis: { type: 'time', nameLocation: 'middle', axisLabel: { formatter: (function(value){ moment.locales('RU_ru'); return moment(value).format('MM/DD HH:mm'); }) } }, yAxis: [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], grid: { right: 140 }, series: seriesList }; mytempChart.clear(); mytempChart.setOption(option); } window.addEventListener('resize', mytempChart.resize);