Echarts实战案例代码(25):javascript分母是0导致折线图断点无法相连的解决方案

简介: Echarts实战案例代码(25):javascript分母是0导致折线图断点无法相连的解决方案

在从后端获取数据后,如果进行均值类的计算,需要除法运算,往往会出现分母为0 的情况。分母为0,在计算出的结果为无穷大,显示为NaN,导致Echarts的折线图中出现断点。如图:


20200807113118124.png


理想的折线图,如果不存在数据,断点自动相连。需要对获取的数据进行处理,分母为0替换成其他数据,显示为0既不影响图表表达的涵义,图表也更加美观。


20200807112847158.png


解决方案:

           for (var i = 0; i <= arrLen; i++) {
                        dataName.push(dest1[i].dataKey + "");
                        var nwArr = [];
                        //分母为0的处理方案;By PoLeung 2020.08.07
                        if (dest1[i].totalTrans == "0") {
                            nwArr[i] = 1;
                        } else {
                            nwArr[i] = dest1[i].totalTrans;
                        }
                        dataList1.push({
                            name: dest1[i].dataKey,
                            value: parseFloat(dest1[i].totalPays / nwArr[i]).toFixed(2)
                        });
                    }


Done!

相关文章
|
2月前
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
154 0
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
696 1
|
4月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
24天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2月前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
3月前
|
JavaScript 前端开发
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
35 1
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
35 0
|
4月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
42 11
|
4月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
207 0
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例