1. 如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading();
$.get(‘data.json‘).done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
2.echarts图表导出excel示例
http://www.jb51.net/article/49343.htm
3.配置echarts工具栏,保存图片
http://www.cnblogs.com/heganlin/p/5764040.html
http://echarts.baidu.com/option.html#toolbox.feature.saveAsImage.icon
function echarts_test (id, x_data, y_item)
{
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById(id));
var option = {
title:{
text:‘title_name‘,
show:false,
},
tooltip: {
show: true
},
legend: {
data:[‘功率/dB‘]
},
toolbox: {
show: true,
feature: {
magicType: {
type: [‘stack‘, ‘tiled‘]
},
dataView: {show:true},
saveAsImage: {
show:true,
excludeComponents :[‘toolbox‘],
pixelRatio: 2
}
}
},
xAxis : [
{
type : ‘category‘,
data : x_data,
}
],
yAxis : [
{
type : ‘value‘
}
],
series : [
{
"name":"功率/dB",
"type":"bar",
"data": y_item,
}
],
dataZoom: [
{
type: ‘slider‘,
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: ‘inside‘,
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: ‘slider‘,
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: ‘inside‘,
yAxisIndex: 0,
start: 30,
end: 80
}
],
};
//myChart.showLoading();
// 为echarts对象加载数据
myChart.setOption(option);
}
原文:http://www.cnblogs.com/liuyang92/p/6063971.html