echarts_02

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

  

原文地址:https://www.cnblogs.com/liuyang92/p/6063971.html