异步加载 Echarts图的数据

  

<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
    var myChart;

    $(function () {

        load();
    });

    function load() {
        require.config({
            paths: {
                //echarts: ‘../Scripts/Echartsjs‘
                echarts: ‘../Scripts/NewEcharts‘
            }
        });
        require(
            [
                ‘echarts‘,
                ‘echarts/chart/bar‘
                //‘echarts/chart/line‘
                //‘echarts/chart/map‘
            ],
            DrawEchart
        );
    }

    function DrawEchart(ec) {

        //--- 折柱 ---
        myChart = ec.init(document.getElementById(‘EchartsDiv‘));

        //图表显示提示信息
        myChart.showLoading({
            text: "图表数据正在努力加载..."
        });
        //定义图表
        var option = {
            tooltip: {
                trigger: ‘axis‘
            },
            //color: ‘#66B3FF‘,
            animation: false,
            addDataAnimation: false,
            calculable: true,
            xAxis: [
                {

                    type: ‘value‘,
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },//分隔线
                    //splitArea: { show: false },//分隔区域
                    type: ‘category‘,
                    // data: [‘巴西‘, ‘印尼‘, ‘美国‘, ‘印度‘, ‘中国‘, ‘世界人口(万)‘]
                    data:[]
                }
            ],
            series: [
                {
                    name: ‘资源使用情况‘,
                    color: ‘#66B3FF ‘,
                    type: ‘bar‘,
                    // data: [18203, 23489, 29034, 104970, 131744, 630230]
                    data:[]
                }
            ]
        };

        //通过Ajax获取数据
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "/Report/GetVMUsedInfo",
            dataType: "json", //返回数据形式为json
            data: {rnd:Math.random()},
            success: function(result) {
                if (result) {
                    //将返回的category和series对象赋值给options对象内的category和series
                    //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                    option.yAxis[0].data = result.yAxis;
                    option.series[0].data = result.series;
                    myChart.hideLoading();
                    myChart.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        });
        //myChart.hideLoading();
        //myChart.setOption(option);
    }
</script>

返回用的是 json数据;

后台使用的Asp.net MVC,使用了匿名类(主要是为了方便),

   var newObj = new
                {
                    yAxis =result.Data.DanweiList,
                    series= result.Data.ApplyVMEventList
                };

            return Json(newObj, JsonRequestBehavior.AllowGet);
时间: 05-25

异步加载 Echarts图的数据的相关文章

H5异步加载多图

异步加载多图(可能没啥用,加载慢)(图片预加载,提前给浏览器缓存图片) 1. 用一个计数变量记录需要加载的图片个数 2. 用new Image()去加载,加载完给此对象的src赋值要加载的url路径(事先加载好图片) 3. 每次加载成功计数加一,加载完成全部调用回调进行下一步操作 4. 此方法可以得知图片什么时候加载完成,示例代码: var img = new Image(); img.onload = () => { // 可以直接使用相同url赋值,此时图片已经预加载完毕 } img.src

Android之数据存储----使用LoaderManager异步加载数据库

一.各种概念: 1.Loaders: 适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中异步加载数据,一般适用于大量的数据查询,或者需要经常修改并及时展示的数据显示到UI上,这样可以避免查询数据的时候,造成UI主线程的卡顿. 即使是查询SQLite数据库,用Loaders来操作会更加的简便. Loaders有以下特点: 可以适用于Activity和Fragment. 可以提供异步的方式

Ajax异步加载数据及Redis缓存

针对网页分类条目的动态加载,图为页面的Head部分. //categoryListServlet准备分类数据 ProductService service = new ProductService(); List<Category> categoryList = service.findAllCategoryList(); response.setContentType("text/html; charset=utf-8"); Gson gson = new Gson();

iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ 下面是按照官网给的Demo,写的一个异步加载数据实例: 1 <title>iScroll demo: click</title> 2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></scrip

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO

[WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化

11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依赖其来给列表加载数据,还可以利用虚拟化的特性去做更多的事情.虚拟化技术有一个很重要的特性就是,它可以准确地判断出哪些列表项处于手机屏幕中,可以动态地去更新这些数据.基于这样的特性,我们可以给列表的功能做更多的优化. 那么下面我们基于一个例子来讲解利用虚拟化技术去做列表的性能优化.有这么一个需求,需要

jQuery异步加载数据添加事件

几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了.当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的.1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:togg

[android] 数据的异步加载和图片保存

把从网络获取的图片数据保存在SD卡上, 先把权限都加上 网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体布局  写界面,使用ListView,创建条目的布局文件,水平摆放的ImageView TextView 在activity中获取到ListView对象,调用setAdapter()方

Android利用Volley异步加载数据完整详细示例(二)

MainActivity如下: package cc.y; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.os.Bundle; import android.util.LruCache; import android.widget.ImageView;