<!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. 浅谈关于树形dp求树的直径问题

    在一个有n个节点,n-1条无向边的无向图中,求图中最远两个节点的距离,那么将这个图看做一棵无根树,要求的即是树的直径. 求树的直径主要有两种方法:树形dp和两次bfs/dfs,因为我太菜了不会写后者这 ...

  2. redis 学习字符类型 hash

    > HSET userinfo1 username "king" (integer) > HSET userinfo1 passowor " (integer ...

  3. zabbix 告警 JXM

    告警 虚拟机上网 [root@test1 alertscripts]# route -n [root@test1 alertscripts]# route add default gw 172.25. ...

  4. TreeMap读源码总结

    红黑树: 定义 A red–black tree is a kind of self-balancing binary search tree in computer science. Each no ...

  5. 时间复杂度——cin加速器

    static auto _=[]() { ios::sync_with_stdio(false); cin.tie(); ; }(); 代码简析:   cin,cout效率低是因为他们要将输入输出的数 ...

  6. SQL SERVER linked server Login failed for user 'NT AUTHORITY\ANONYMOUS LOGON'

    昨天创建了一个View, 这个view是一系列的表达式(CTE)组成,封装了好多的业务逻辑,简化下语句如下 ;with CTE AS( ...) SELECT a.company_id ,b.comp ...

  7. 关于火狐不响应event.keyCode解决方法

    <body onkeydown="enterkey(event)"> <!-- 点击键盘即触发 enterkey函数 --> function enterk ...

  8. maya2016安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  9. 将应用图标添加到ubuntu dash中

    1 在appplications中添加一个desktop文件 sudo gedit /usr/share/applications/xdbe.desktop 2 在desktop文件中添加如下 [De ...

  10. 封装RateLimiter 令牌桶算法

    自定义注解封装RateLimiter.实例: @RequestMapping("/myOrder") @ExtRateLimiter(value = 10.0, timeOut = ...