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. GDOI2016总结

    前言 第一次GDOI,收获了很多. 这几天下来的生活有趣而精彩,尽管我没有高级的腐败工具,但是还是通过偷抢拐骗各种方法满足了腐败的欲望了. BUT,参加GDOI可不是为了玩耍,而是去提升自己的实力,磨 ...

  2. HTML中表格table标签的实例

    一.表格有边框,第一行居中对齐 二.表格没有边框 三.表格有水平标题 四.表格有垂直标题 五.合并行单元格 colspan合并单元格 六.表格有单元格边距(内边距) 七.表格没有单元格间距 八.表格有 ...

  3. Activiti流量变量(九)

    1什么是流程变量 流程变量在 activiti 中是一个非常重要的角色,流程运转有时需要靠流程变量,业务系统和 activiti结合时少不了流程变量,流程变量就是 activiti 在管理工作流时根据 ...

  4. linux 搭建环境

    报错:cannot find valid baseurl for repo:base 解决办法: https://blog.csdn.net/banqgg/article/details/782560 ...

  5. android 后台运行service实现和后台的持续交互

    在项目中有这么一种需求 需要后台开启服务,时刻记录用户和软件的交互行为,一旦交互发生,就向服务器测发送一条消息 解决方案: 一.创建一个service服务类 在service中开启一个线程,servi ...

  6. Java数据结构与算法(2):栈

    栈是一种线性表,特点在于它只能在一个位置上进行插入和删除,该位置是表的末端,叫做栈的顶(top).因此栈是后进先出的(FIFO).栈的基本操作有push.peek.pop. 栈的示意图 进栈和出栈都只 ...

  7. Python编程:从入门到实践—变量和简单数据类型

    变量的命名和使用 #!/usr/bin/env python# -*- encoding:utf-8 -*- message ="Hello Python world!"print ...

  8. qbzt day1 上午

    内容提要 模拟,贪心 在讲这些东西之前,我们先来了解一个东西:high level 这个东西大体上就是你做题之前要先想清楚自己要写什么,怎么写,然后再写,不要有一点写一点 1.模拟 模拟算法算是很水的 ...

  9. 38 是否要使用memory引擎的表

    38 是否要使用memory引擎的表 内存表的数据组织结构 create table t1(id int primary key, c int) engine=Memory; create table ...

  10. Learn Python the hard way, ex42 物以类聚

    依然少打很多剧情,并修改了很多,还好,能运行 #!urs/bin/python #coding:utf-8 from sys import exit from random import randin ...