最近有用到ECharts做可视化报表，小结一下

一、准备数据

　　1.官网下载echarts.min.js

　　2.引入jquery.js

　　

　　3.请求用的json数据

{

    "list":[

        {

            "department":"和平区",

            "num":480,

            "ber":200

        },

        {

            "department":"河西区",

            "num":380,

            "ber":460

        },

        {

            "department":"河东区",

            "num":366,

            "ber":223

        },

{

            "department":"河北区",

            "num":320,

            "ber":210

        },

{

            "department":"南开区",

            "num":300,

            "ber":200

        }

    ]

}

二、整体代码

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="traceProvinceOrder" style="width:400px; height:400px;"></div>

    <!-- ECharts单文件引入 -->

    <script src="echarts.min.js"></script>

    <script src="../webapp/js/jquery.js"></script>

    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('traceProvinceOrder'));

        // 显示标题，图例和空的坐标轴

        myChart.setOption({

            title: {

                text: '异步数据加载示例'

            },

            color: ["pink", 'red'],

            tooltip: {},

            legend: {

                data: ['发布排行', '牵手排行'],

                x:'70%'

            },

            xAxis: {

                data: []

            },

            yAxis: {},

            series: [{

                    barWidth: "20px",

                    name: '发布排行',

                    type: 'bar',

                    itemStyle: {

                        normal: {

                            label: {

                                show: true,

                                position: 'top',

                                textStyle: {

                                    color: '#333'

                                }

                            }

                        }

                    },

                    data: []

                },

                {

                    barWidth: "20px",

                    name: '牵手排行',

                    type: 'bar',

                    itemStyle: {

                        normal: {

                            label: {

                                show: true,

                                position: 'top',

                                textStyle: {

                                    color: '#333'

                                }

                            }

                        }

                    },

                    data: []

                }

            ]

        });

        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        var names = []; //类别数组（实际用来盛放X轴坐标值）

        var nums = []; //销量数组（实际用来盛放Y坐标值）

        var bers = []; //销量数组（实际用来盛放Y坐标值）

        $.ajax({

            type: 'get',

            url: 'city.json', //请求数据的地址

            dataType: "json", //返回数据形式为json

            success: function (result) {

                //请求成功时执行该函数内容，result即为服务器返回的json对象

                $.each(result.list, function (index, item) {

                    names.push(item.department); //挨个取出类别并填入类别数组\

                    nums.push(item.num); //挨个取出销量并填入销量数组

                    bers.push(item.ber); //挨个取出销量并填入销量数组

                });

                myChart.hideLoading(); //隐藏加载动画

                myChart.setOption({ //加载数据图表

                    xAxis: {

                        data: names

                    },

                    series: [{

                            // 根据名字对应到相应的系列

                            name: '发布排行', //显示在上部的标题

                            data: nums

                        },

                        {

                            // 根据名字对应到相应的系列

                            name: '牵手排行', //显示在上部的标题

                            data: bers

                        }

                    ]

                });

            },

            error: function (errorMsg) {

                //请求失败时执行该函数

                alert("图表请求数据失败!");

                myChart.hideLoading();

            }

        });

    </script>

</body>

 　　一个简单的柱状图表展示

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

行动才是最具有价值，即使做错。——送给努力的你

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

  1. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  2. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  3. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

  4. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  5. Echarts 异步数据加载遇到的问题

    看了Echarts官网异步加载数据的Demo var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...

  6. 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）

    实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...

  7. ios ableviewcell的动态加载数据，模仿喜马拉雅动态数据加载

    iphone(UITableViewCell)动态加载图片http://developer.apple.com/library/ios/#samplecode/LazyTableImages/Intr ...

  8. echarts 设置数据加载遮罩层

    //显示加载数据的loading        chart.showLoading({            text: "图表数据正在努力加载...",            x ...

  9. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

随机推荐

  1. 关于Execel 2007 连接到 hive odbc

    官方给出的都是 2010 或2012版的连接方案,看起来与2007有些不同,但我相信这些功能都是通用的. 下载 odbc hive 驱动.http://hortonworks.com/products ...

  2. ubuntu下的pycharm4中文路径乱码

    修改字体: 设置(settings)->外观与行为(appearance & behavior) -> 外观(appearance) ->我选择的主题是Darcula 但其字 ...

  3. Eclipse的一下设置

    一.设置自动补全 1.打开 Eclipse -> Window(窗口) -> Perferences(首选项) 2.点开java->Editor(编辑器)->Content A ...

  4. ASP.NET 设计模式分为三种类型

    设计模式分为三种类型,共23类.  一.创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式.      二.结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代 ...

  5. bzoj1221软件开发 费用流

    题目传送门 思路: 网络流拆点有的是“过程拆点”,有的是“状态拆点”,这道题应该就属于状态拆点. 每个点分需要用的,用完的. 对于需要用的,这些毛巾来自新买的和用过的毛巾进行消毒的,流向终点. 对于用 ...

  6. 【记录】BurpSuite之Grep-Extract

    借助一次sql注入来说明Grep-Extract的作用 要报出当前数据库中所有表名,这里可以有多种方法,我借助limit语句,以此来说明Grep-Extract的用法.

  7. PIE SDK屏幕坐标和地图坐标转换

    1. 功能简介 屏幕坐标和地图坐标转换,就是字面意思,将电脑屏幕的坐标转换为带有空间信息的地图坐标,主要运用PIE SDK地图控件的ToMapPoint()方法,而地图坐标转换为设备坐标(屏幕),用的 ...

  8. idea中使用restclient测试接口发送http请求

    转载:https://jingyan.baidu.com/article/ca41422f0bfd8e1eae99ed31.html

  9. shell特殊字符汇总【转】

    Linux下无论如何都是要用到shell命令的,在Shell的实际使用中,有编程经验的很容易上手,但稍微有难度的是shell里面的那些个符号,各种特殊的符号在我们编写Shell脚本的时候如果能够用的好 ...

  10. Android学习06Android应用程序的基本组件

    一个Android应用程序可以由几个不同的组件构成,Android应用程序的基本组件包括:Activity,Service,BroadcastReceiver,ContentProvider和Inte ...