<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/dist/echarts.js"></script>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
     var uri = 'api/echart_test'
    // 路径配置
    require.config({
        paths:{
            echarts: 'js/dist'
    }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
        ],
        drewEcharts
    );
    function drewEcharts(ec) {
        // 基于准备好的dom，初始化echarts图表
        myChart = ec.init(document.getElementById('main'));
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : (function(){
                        var arr=[];
                        $.ajax({
                            type : "get",
                            async : false, //同步执行
                            url : uri,
                            data : {},
                            dataType : "json", //返回数据形式为json
                            success : function(result) {
                                if (result) {
                                    for(var i=0;i<result.length;i++){
                                        console.log(result[i].name);
                                        arr.push(result[i].name);
                                    }
                                }
 
                            },
                            error : function(errorMsg) {
                                alert("error");
                                myChart.hideLoading();
                            }
                        })
                        return arr;
                    })()
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type": uri,
                    "data":(function(){
                        var arr=[];
                        $.ajax({
                            type : "get",
                            async : false, //同步执行
                            url : uri,
                            data : {},
                            dataType : "json", //返回数据形式为json
                            success : function(result) {
                                if (result) {
                                    for(var i=0;i<result.length;i++){
                                        console.log(result[i].num);
                                        arr.push(result[i].num);
                                    }
                                }
                            },
                            error : function(errorMsg) {
                                alert("error!");
                                myChart.hideLoading();
                            }
                        })
                        return arr;
                    })()
 
                }
            ]
        };
        // 为echarts对象加载数据
        myChart.setOption(option);
    }
    </script>

echart动态加载数据的更多相关文章

  1. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  2. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  3. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  4. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  5. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  6. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  9. 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取

    1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...

随机推荐

  1. jsp导出身份证到excel时候格式不正确

    今天早上客户跟我说excel导出身份证的时候显示有的对有的不对,我一看原来身份证以X结尾的能够,其他都显示不对.身份正显示如图所看到的: 在网上搜了一下发现,原来excel看你数字列超过12位就会显示 ...

  2. Mongodb for PHP教程之管理工具

    1:下面的事情应该是PHP程序员应该了解的,更详细的参考可以百度谷歌之 mongodb PHP官方文档http://us.php.net/manual/en/book.mongo.php 1.Mong ...

  3. Hadoop之中的一个：Hadoop的安装部署

    说到Hadoop不得不说云计算了,我这里大概说说云计算的概念,事实上百度百科里都有,我仅仅是copy过来,好让我的这篇hadoop博客内容不显得那么单调.骨感.云计算近期今年炒的特别火,我也是个刚開始 ...

  4. Javascript调试命令

    Javascript调试命令——你只会Console.log() ? Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console).不同浏览器上它的工作方式是不一样的 ...

  5. JDBC各种数据库连接URL关键代码

    通过JDBC连接数据库时,各个数据库有着不同的URL格式,为了方便大家使用,我在以下提供了常见的7种数据库连接示例代码,请根据实际需要进行相应的更改. 1.Oracle数据库 Class.forNam ...

  6. casperjs在拆分文件后的中文乱码问题的解决

    windows环境. capserjs的中文乱码使用phantom.outputEncoding="GBK";即可解决. 但当我们脚本很大,需要拆分时(参考http://docs. ...

  7. codeforces 686A A. Free Ice Cream(水题)

    题目链接: A. Free Ice Cream //#include <bits/stdc++.h> #include <vector> #include <iostre ...

  8. BZOJ_4199_[Noi2015]品酒大会_后缀自动机

    BZOJ_4199_[Noi2015]品酒大会_后缀自动机 Description 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 酒家”和“首席 ...

  9. P3239 [HNOI2015]亚瑟王 期望dp

    这个题一看就是期望dp,但是我有个问题,一个事件的期望等于他所有事件可能行乘权值的和吗...为什么我有天考试的时候就不对呢...求大佬解释一下. 至于这道题,f[i][j]代表前i个有j个发动技能,这 ...

  10. bzoj 3809 Gty的二逼妹子序列 —— 莫队+分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3809 据说一开始应该想到莫队+树状数组,然而我想的却是莫队+权值线段树... 如果用权值线段 ...