echarts_02

Posted 2020-08-19 aWolfMan

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