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. Eclipse搭建Maven项目并上传SVN备份

    本文出自:http://www.cnblogs.com/2186009311CFF/p/7226127.html 背景:近段时间在学着Java,想着用Java做BS的项目.但是项目一遇到问题又要重做, ...

  2. prefetches

    用于设置预请求的所有url的列表,该部分URL,会在进入小程序后自动发起请求(优于开发者代码加载).当开发者再次发起request请求时可以增加cache参数,如果配置的prefetch请求已返回,则 ...

  3. docker 安装MongoDB以及设置用户

    MongoDB 是一个免费的开源跨平台面向文档的 NoSQL 数据库程序. 1.查看可用的 MongoDB 版本 访问 MongoDB 镜像库地址: https://hub.docker.com/_/ ...

  4. javascript之alter的坑

    1.注意在使用alert返回两数之和时,会出现0.1+0.2并不等于0.3的bug 解决方法: var f=0.1; var g=0.2; alert((parseFloat(f)*100+parse ...

  5. Are We Ready for SDN? Implementation Challenges for Software-Defined Networks

    Name of article:Are We Ready for SDN?  Implementation Challenges for  Software-Defined Networks Orig ...

  6. 搭建wordpress-安装xshell

    安装xshell 下载地址 https://www.netsarang.com/download/down_xsh6.html?token=RmxrTGc3VEkwN2VxSnRuRC92RENkUU ...

  7. mac 电脑设置密码可以直接使用 passwd 这个命令

    mac 电脑设置密码可以直接使用 passwd 这个命令 说明:这个命令行级别的设置会直接影响到我们登录.

  8. Matlab 中 函数circshift()的用法

    a = [ ; ; ]; b = [- - -; - - -;- - -]; c = [ ; ; ]; Hist(:,:,) = a; Hist(:,:,) = b; Hist(:,:,) = c; ...

  9. foreach（增强for循环）和for的区别

    https://www.cnblogs.com/XiaojianGo/p/7471860.html 首先说一下foreach有的也叫增强for循环,foreach其实是for循环的一个特殊简化版. 再 ...

  10. canvas 方块旋转案例

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...