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);
  • 相关阅读:
    Shell脚本定期清空大于1G的日志文件
    Shell脚本实现监视指定进程的运行状态
    Shell脚本实现根据文件的修改时间来分类文件
    通过Shell统计PV和UV
    Python之Html解析方法
    Http请求的Python实现
    Python数据可视化之Pygal(雷达图)
    Python数据可视化之Matplotlib(饼图)
    Python数据可视化之Matplotlib(折线图)
    控制台超市系统(Python)
  • 原文地址:https://www.cnblogs.com/zychengzhiit1/p/4534867.html
Copyright © 2011-2022 走看看