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. 【GDOI 2016 Day1】疯狂动物城

    题目 分析 注意注意:码农题一道,打之前做好心理准备. 对于操作1.2,修改或查询x到y的路径,显然树链剖分. 对于操作2,我们将x到y的路径分为x到lca(x,y)和lca(x,y)到y两部分. 对 ...

  2. 【leetcode】1131. Maximum of Absolute Value Expression

    题目如下: Given two arrays of integers with equal lengths, return the maximum value of: |arr1[i] - arr1[ ...

  3. LeetCode--079--单词搜索(python)

    给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格.同一个单元格内的字母不允许被重复使用. ...

  4. APP功能测试注意点

    App功能测试的7大注意点 : APP测试   在日常工作的摸索中,我们将如何做好app测试的注意点简单归结为如下内容.  弱网测试,兼容性测试,UI测试.中断测试, 01 运行 1)App安装完成后 ...

  5. 三、angular7登录请求和路由带参传递

    在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from '@angular/common/http'; impo ...

  6. SpringCloud 教程 （一） 消息总线(Spring Cloud Bus)

    Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...

  7. POJ 1383 Labyrinth （bfs 树的直径）

    Labyrinth 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/E Description The northern part ...

  8. 原生javascript兼容性总结

    1.addEventListener() :方法用于向指定元素添加事件句柄.// Internet Explorer 8 及更早IE版本不支持,Opera 7.0 及 Opera 更早版本也不支持. ...

  9. Python编程：从入门到实践—类

    创建类 #!/usr/bin/env python# --*-- encoding:utf-8 --*-- class Dog(): """一次模拟小狗的简单尝试&quo ...

  10. python生成requirements.txt 导出项目依赖

    使用pip freeze $ pip freeze > requirements.txt 这种方式是把整个环境中的包都列出来了,如果是虚拟环境可以使用. 通常情况下我们只需要导出当前项目的req ...