<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>ECharts</title>

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

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

</head>

<body>

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

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        var option = {

            color: ['#ca8622', '#bda29a'],

            //['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

            title: {

                text: '维度分析'

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'cross',

                    crossStyle: {

                        color: '#999'

                    }

                }

            },

            legend: {

                data: ['销量','小组绩效']

            },

            xAxis: {

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

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            },

            {

                name: '小组绩效',

                type: 'bar',

                data: [85,90,88,86,95,90]

            }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

        //$.getJSON('Handler1.ashx', {

        //    request:"ssss"

        //}, function (json) {

        //    alert("22");

        //}

        //);

        /* 测试可以

        $.ajax({

            url: 'Handler1.ashx',

            type: 'GET',

            dataType: 'json',

            timeout: 1000,

            async: false,

            success: function (xml,dstat) {

                // alert(xml);

                //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点， 和用jQuery操作HTML对象没有区别

                option = xml;

                myChart.setOption(option);

            },

            error: function (er) {

                alert(er.responseText);

            }

        });

        */

    </script>

</body>

</html>
using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

namespace AppBox.CRM.Gift

{

    /// <summary>

    /// Handler1 的摘要说明

    /// </summary>

    public class Handler1 : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

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

            //context.Response.Write("Hello World");

            StringBuilder strjson = new StringBuilder();

            strjson.AppendLine("{");

            strjson.AppendLine("\"title\": {");

            strjson.AppendLine("    \"text\": 'ECharts 入门示例'");

            strjson.AppendLine("},");

            strjson.AppendLine("\"tooltip\": {},");

            strjson.AppendLine("\"legend\": {");

            strjson.AppendLine("    \"data\": ['销量']");

            strjson.AppendLine("},");

            strjson.AppendLine("\"xAxis\": {");

            strjson.AppendLine("    \"data\": [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]");

            strjson.AppendLine("},");

            strjson.AppendLine("\"yAxis\": {},");

            strjson.AppendLine("\"series\": [{");

            strjson.AppendLine("    \"name\": '销量',");

            strjson.AppendLine("    \"type\": 'bar',");

            strjson.AppendLine("    \"data\": [20, 20, 20, 10, 10, 100]");

            strjson.AppendLine("}]");

            strjson.AppendLine("}");

            context.Response.Write(strjson.ToString().Replace("'","\""));

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

echarts.js文件,刚开始下载错了.

百度开源项目插件 - Echarts 图表的更多相关文章

  1. SNF快速开发平台MVC-集成了百度开源项目echars

    百度开源项目echars图表样式非常丰富,而且开源免费.非常好.所以在我们框架当中也进行了集成echars完成图表任务. 我们进行了两次封装,利于我们开发使用.我也看到过有些架构师 按echars里的 ...

  2. SNF快速开发平台MVC-富文本控件集成了百度开源项目editor

    一.效果如下: 二.在框架当中调用代码如下: 1.在js里配置如下: <script type="text/javascript"> var viewModel =fu ...

  3. 百度最热门31款开源项目：ECharts火爆了！

    本文为大家整理了百度开源的热门项目,看看有没有感兴趣的,排名顺序按照 Github ★Star 数排列. 0.一个纯 Java 的图表库 ECharts★Star 19690 ECharts,一个纯 ...

  4. 程序员必备，C#各类项目、开源项目插件资料收藏

    一.AOP框架     Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面 ...

  5. angular2项目关于Echarts图表的处理

    在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...

  6. 在内网中 vue项目添加ECharts图表插件

    原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...

  7. ASP.NET MVC + ECharts图表案例

    废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...

  8. 百度开源插件echarts介绍及如何使用

    前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考:http://echarts.baidu.com/examples.html. ...

  9. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

随机推荐

  1. POJ1057 FILE MAPPING

    题目来源:http://poj.org/problem?id=1057 题目大意:计算机的用户通常希望能够看到计算机存储的文件的层次结构的图形化表示.Microsoft Windows的 " ...

  2. python 字符串 操作

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

  3. redis初识及基本操作

    一.redis介绍: 1.Redis是什么: REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(Key-Value) ...

  4. jquery 初步学习

    首先 jQuery是一个轻量级的 JS框架,核心文件才几十KB 1. jquery 对象 var $variable=jquery对象 var variable = DOM对象 $variable[0 ...

  5. vue 之 nextTick 与$nextTick

    VUE中Vue.nextTick()和this.$nextTick()怎么使用? 官方文档是这样解释的: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 D ...

  6. NIOGoodDemo

    Java NIO是在jdk1.4开始使用的,它既可以说成“新I/O”,也可以说成非阻塞式I/O.下面是java NIO的工作原理: 1. 由一个专门的线程来处理所有的 IO 事件,并负责分发. 2. ...

  7. Linux下安装&运行Jmeter程序

    Jmeter在linux系统中运行需要安装jdk和Jmeter两个软件: 1.安装JDK 先检查系统是否有安装jdk,在linux中执行如下命令:java -version  如果返回版本信息,说明系 ...

  8. python_案例综合：教材记录管理

    class Book(): def __init__(self,ISBN,Ftile,Author,Publisher): self.ISBN = ISBN self.Ftile = Ftile se ...

  9. 微服务（Micro Service Architecture）浅析

    最近一段时间,微服务的概念很火,可能是跟Docker技术的快速发展和壮大有一定的关系,同时借助于Uber.Netflix.Groupon等公司的实践.宣传和推广,使得MSA渐渐地成为企业或者架构师讨论 ...

  10. 断路器hystrix

    分布式系统中不可避免的会出现一些故障,因为服务间错综复杂的依赖关系,有时候一个服务出现问题后,会导致依赖于它的服务出现远程调度的线程受阻,给服务造成压力,当然同样的,祖父级调用者(暂且这么叫吧)当然也 ...