martingrumbt commented on PR #17143: URL: https://github.com/apache/echarts/pull/17143#issuecomment-1621648689
@Ovilia Thank you for having a look into this issue. Your fix breaks the dataZoom panels when nullish data is involved. `null` as x value breaks the x-axis zoom panel. `null` as y value breaks the y-axis zoom panel. Also for `undefined`, `'-'` ### master branch <img width="1674" alt="master_datazoom_x_and_y" src="https://github.com/apache/echarts/assets/31829974/c7d2ff5c-f274-49ec-bc07-43630ecc475c";> DataZoom for x and y axis enabled <img width="1674" alt="master_datazoom_x" src="https://github.com/apache/echarts/assets/31829974/0227e2da-b442-4f91-a4fd-e6a8f5abcecc";> DataZoom only for x axis enabled </br> ### fix-17141 branch <img width="1674" alt="fix-17141_datazoom_x_and_y" src="https://github.com/apache/echarts/assets/31829974/24d8d1d7-18fe-4940-9b9e-7d99e81ee1ce";> DataZoom for x and y axis enabled <img width="1674" alt="fix-17141_datazoom_x" src="https://github.com/apache/echarts/assets/31829974/94de18da-a3bb-43d7-8abb-ca6d2cab824f";> DataZoom only for x axis enabled ### TestFile ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="lib/simpleRequire.js"></script> <script src="lib/config.js"></script> <script src="lib/jquery.min.js"></script> <script src="lib/facePrint.js"></script> <script src="lib/testHelper.js"></script> <link rel="stylesheet" href="lib/reset.css"/> </head> <body> <style> </style> <script> const dataNoneLinear = [ [0, 10], [10, 0], [80, 1], [100, 15], ]; const dataNoneLinearWithNull = [ [0, 10], [10, 0], [null, 1], [100, null], ]; const dataTimeNoneLinear = [ [(new Date("07/05/2023 10:00:00")).getTime(), (new Date("07/05/2023 10:00:00")).getTime()], [(new Date("07/05/2023 11:00:00")).getTime(), (new Date("07/05/2023 00:00:00")).getTime()], [(new Date("07/05/2023 18:00:00")).getTime(), (new Date("07/05/2023 01:00:00")).getTime()], [(new Date("07/05/2023 20:00:00")).getTime(), (new Date("07/05/2023 15:00:00")).getTime()], ]; const dataTimeNoneLinearWithNull = [ [(new Date("07/05/2023 10:00:00")).getTime(), (new Date("07/05/2023 10:00:00")).getTime()], [(new Date("07/05/2023 11:00:00")).getTime(), (new Date("07/05/2023 00:00:00")).getTime()], [null, (new Date("07/05/2023 01:00:00")).getTime()], [(new Date("07/05/2023 20:00:00")).getTime(), null], ]; const charts = [ {id: '01', type: 'line', axisType: 'category', data: dataNoneLinear}, {id: '02', type: 'line', axisType: 'category', data: dataNoneLinearWithNull}, {id: '03', type: 'line', axisType: 'value', data: dataNoneLinear}, {id: '04', type: 'line', axisType: 'value', data: dataNoneLinearWithNull}, {id: '05', type: 'line', axisType: 'time', data: dataTimeNoneLinear}, {id: '06', type: 'line', axisType: 'time', data: dataTimeNoneLinearWithNull}, ]; function createChartDOMDiv(id) { let element = document.getElementById(id); if (!element) { element = document.createElement('div'); element.id = id; document.body.appendChild(element); } } function getDataZoom(opt) { const dataZoom = { borderColor: 'blue', fillerColor: 'rgba(0, 255, 0, 0.2)', dataBackground: { lineStyle: { color: 'blue' }, areaStyle: { color: 'rgba(0, 0, 255, 0.6)' } }, selectedDataBackground: { lineStyle: { color: 'blue' }, areaStyle: { color: 'rgba(0, 0, 255, 0.6)' } } }; return Object.assign(opt, dataZoom); } charts.forEach(function ({id, type, axisType, data}) { createChartDOMDiv(id); require([ 'echarts', ], function (echarts) { var option; option = { xAxis: { type: axisType }, yAxis: { type: axisType }, series: [ { data: data, type: type } ], dataZoom: [ getDataZoom({ xAxisIndex: 0, }), getDataZoom({ yAxisIndex: 0, }), ] }; testHelper.create(echarts, id, { title: [ "Test DataZoom on x and y axis", `${type} | ${axisType}`, ], info: { type: type, xAxisType: axisType, yAxisType: axisType, }, dataTable: { x: data.map(d => d[0]), y: data.map(d => d[1]), }, option: option }); }); }) </script> </body> </html> ``` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
