ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网地址下载：1.https://echarts.baidu.com/echarts2/doc/example.html

2.https://www.echartsjs.com/examples/

1.简单的引入

2.数据绑定

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

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

    <div id="main" style="height:400px"></div>

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

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'http://echarts.baidu.com/build/dist'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data:['销量']

                    },

                    xAxis : [

                        {

                            type : 'category',

                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[, , , , , ]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

3.动态获取后台数据

可以通过ajax请求 :后台返回的数据可以封装到一个List集合中。最后，记得将这个list对象转换成json格式，返回给前台。

可以参考 ajax结合ashx一般处理程序 ：https://blog.csdn.net/lily233/article/details/78752936

js：

function test(id,pwd){

            $.ajax({

                url: '/Tools/Handler.ashx?action=test',

                data:{id : id, pwd : pwd },

                success: function (data){

                    alert(data.data);

                }

            });

        }

ashx：

    HttpRequest _request;

    HttpResponse _response;

    public void ProcessRequest(HttpContext context)

        {

           _request = context.Request;

           _response = context.Response;

            context.Response.ContentType = "application/json";

            string action = context.Request["action"].ToString();

            switch (action)

            {

                case "test":

                    test(context);

                    break;

                default:

                    break;

            }

        }

        public void test(HttpContext context)

        {

            string id = context.Request["id"].ToString();

            string pwd = context.Request["pwd"].ToString();

            ///代码段

            ///

            List<int> list = new List<int>();

            list.add();

            vat data = JsonConvert.SerializeObject(list);

            HttpContext.Current.Response.Write("data:"+data);

        }

ECarts 的初步使用的更多相关文章

  1. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  2. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  3. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  4. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  5. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  8. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

  9. 初步了解CPU

    了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...

随机推荐

  1. 进程队列补充、socket实现服务器并发、线程完结

    目录 1.队列补充 2.关于python并发与并行的补充 3.TCP服务端实现并发 4.GIL全局解释器锁 什么是保证线程安全呢? GIL与Lock 5.验证多线程的作用 对结论的验证: 6.死锁现象 ...

  2. 【NOIP2013模拟】归途与征程

    题目 分析 好吧...明显是暴力题. 首先,把A串分成只有小写字母组成的小分串,按顺序存放:A[1].A[2].A[3]--. 对于同构循环串,显然把两个B串合在一起,成为一个新的C串.\(C[i.. ...

  3. A1046

    n个节点围成一个环,每个节点之间的距离已知.输入n并给出n个节点的距离,输入m组节点编号(两个),求这两个节点编号间的最短距离. 1 建立dis[]数组,记录V1点到每一个点的顺时针距离,sum计算环 ...

  4. Day_02-Python的循环结构

    循环结构 应用场景 如果在程序中我们需要重复的执行某条或某些指令,例如用程序控制机器人踢足球,如果机器人持球而且还没有进入射门范围,那么我们就要一直发出让机器人向球门方向奔跑的指令.当然你可能已经注意 ...

  5. java获取当前时间的年周月季度等的开始结束时间

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * Created b ...

  6. 批量下载文件php

    做了个照片墙,要提供批量下载照片的功能,如果你会文件下载,那批量也是小菜一碟,就是把文件打包压缩为  zip 文件再下载,而php的内置类ZipArchive()让你很容易实现. 首先,配置php.i ...

  7. 改变icon方向

    例你想要箭头朝上的图标而你只有箭头朝下的图标,不幸的是你又没有朝上的图标,那就旋转图标. <i class="icon iconfont _icon-iconfontfanhui4&q ...

  8. （21）UML类图学习及使用

    UML类图的学习和使用 1.参考博客http://www.uml.org.cn/oobject/201211231.asp

  9. 进阶2：Hadoop 环境搭建： hadoop3.1.1 jdk1.8 在centos6.5上的伪分布式安装

    参考文章: https://blog.csdn.net/qq_38038143/article/details/82779016 https://blog.csdn.net/m0_37461645/a ...

  10. （转）Intellij IDEA 自动生成 serialVersionUID

    转自 : https://blog.csdn.net/tiantiandjava/article/details/8781776 Setting->Inspections->Seriali ...