一、如何处理echarts无数据时占位问题
在实际应用中，echarts在无数据时默认会显示一个空的表格，这样不仅无法体现数据的意义，而且对美观度也会产生影响。要解决这个问题，我们可以进行以下操作：
1、设置占位图
<// 在option中加入如下代码
option = {
title: {
text: 'Echarts无数据显示',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
graphic: {
type: 'text',
left: 'center',
top: '45%',
style: {
text: '暂无数据',
textAlign: 'center',
fill: '#ccc',
fontSize: 20
}
}
};
这是一种比较简单的解决方案，无数据时通过设置title（标题）、graphic（图形）等元素，让图表显示一张占位图片，使页面保持美观性和一致性，同时增加用户体验度。
2、图表注释处理
<// 在option中加入如下代码
option = {
series: [{
type: 'pie',
data: [],
label: {
show: false // 隐藏注释
}
}]
};
通过设置label：{show: false}属性就可以隐藏注释，这样图表就不会显示空白，而是会完美地显示出来。
3、设置Placeholder数据
<// 在option中加入如下代码
option = {
series: [{
type: 'pie',
data: [{
value: '',
name: '暂无数据',
itemStyle: {
color: '#ddd'
}
}]
}]
};
将数据设置为空，再通过itemStyle改变饼图的颜色，就可以做到在有数据时正常显示，无数据时显示指定的颜色和文字提示，达到占位效果。
二、如何进行数据加载前等待
在数据请求较慢的情况下，可以预设加载动画，在请求过程中形成视觉缓冲，使用户能够更好的体验数据的加载过程。下面介绍两种实现方式：
1、loading动画
<// 引入Echarts，初始化图形，然后加上如下代码
myChart.showLoading({
text: '正在努力加载中……'
});
myChart.hideLoading();
Echarts内置有loading动画的效果，我们只需要在需要加loading动画的地方加上showLoading()函数，即可实现。
2、覆盖layer实现
<// 引入layer资源，加上如下代码
var index = layer.load(1, {
shade: [0.1,'#fff'] //为了演示，这里设置了浅色遮罩，实际使用一般要设置透明度较低的遮罩
});
layer.close(index);
覆盖layer实现等待加载效果，需要引入layer资源，然后调用layer.load()方法即可生成等待动画。需要注意的是，这里的shade属性是遮罩的层级和颜色，一般需要根据实际需要进行设置。
三、如何处理echarts小数显示问题
在实际应用中，很多时候我们需要将浮点数保留为固定的小数位数，但是默认的echarts没有提供这样的方法。下面介绍两种简单的实现方式：
1、toFixed()方法
<// 在option中加入如下代码（以折线图为例）
option = {
xAxis: {
type: 'category',
data: [],
axisLabel: { // 全局设置x轴数据格式化
formatter: function (value) {
return value.substring(5, 10) // 截取日期的月日部分
}
}
},
yAxis: {
type: 'value',
axisLabel: { // 全局设置y轴数据格式化
formatter: function (value) {
return value.toFixed(2) // 保留两位小数
}
}
},
series: [{
data: [],
type: 'line'
}]
};
使用toFixed()方法是最常见的处理小数位数问题的方法，我们只需要在需要保留小数的地方加上.toFixed()即可实现。
2、自定义处理函数
<// 自定义一个处理小数位数的函数
function formatFloat(value, num) {
var f = parseFloat(value);
if (isNaN(f)) {
return false;
}
var f0 = Math.pow(10, num);
f = Math.round(value * f0) / f0;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
<// 在option中加入如下代码（以折线图为例）
option = {
xAxis: {
type: 'category',
data: [],
axisLabel: { // 全局设置x轴数据格式化
formatter: function (value) {
return value.substring(5, 10) // 截取日期的月日部分
}
}
},
yAxis: {
type: 'value',
axisLabel: { // 全局设置y轴数据格式化
formatter: function (value) {
return formatFloat(value, 2) // 调用formatFloat方法保留两位小数
}
}
},
series: [{
data: [],
type: 'line'
}]
};
如果使用toFixed()方法无法满足需求，也可以自定义处理函数。例如上面例子中的formatFloat()方法，它接受两个参数value和num，分别是浮点数和需要保留的小数位数。该方法通过四舍五入计算，最终返回字符串类型的数据。我们在y轴数据格式化时，直接调用formatFloat方法即可。
