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); }