zoukankan      html  css  js  c++  java
  • 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); 
    }
    

      

  • 相关阅读:
    计算机网络实验之Wireshark_DNS
    计算机网络自顶向下配套资源
    MOS_Chapter2_Process And Thread
    Leetcode 23. 合并K个升序链表
    MOS_Chapter1_Introduction
    Leetcode的开门大吉
    hexo和gitee搭建免费个人博客详细教程
    第三章 模型搭建和评估-评估
    第三章 模型搭建和评估--建模
    第二章:第四节数据可视化
  • 原文地址:https://www.cnblogs.com/liuyang92/p/6063971.html
Copyright © 2011-2022 走看看