zoukankan      html  css  js  c++  java
  • 异步加载 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);
  • 相关阅读:
    浏览器如何减少 reflow/repaint
    caller和callee的区别
    正则表达式中的2和1和3不仅分组还占位
    正则分组和捕获
    Javascript之BOM与DOM讲解
    Ubuntu14.04(nginx+php+mysql+vsftp)配置安装流程
    JS的类型转换
    typeof 和 instanceof
    ios对new Date() 的兼容问题
    module.exports 和 export default
  • 原文地址:https://www.cnblogs.com/zychengzhiit1/p/4534867.html
Copyright © 2011-2022 走看看