<!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. eclipse gradle 找不到依赖解决办法

    右击工程,选择gradle  在点击Refresh Gradle Project 即可,..不得不说,gradle 在eclipse 下真没maven 好用.....

  2. P4173 残缺的字符串（FFT）

    [Luogu4173] 题解 \(1.\)定义匹配函数 \(2.\)定义完全匹配函数 \(3.\)快速计算每一位的完全匹配函数值 #include<cstdio> #include< ...

  3. jquery插件分页

    收藏地址: http://www.jq22.com/yanshi5697

  4. spring bean name生成规则

    现象: PVService PVServiceImpl ===>名称就是PVServiceImpl, 首字母没有小写 PageViewServiceImpl ==>名称是pageViewS ...

  5. python_文件操作代码实例

    """提示:代码中的内容均被注释,请参考,切勿照搬""" 1 #文件的打开和关闭 ''' 文件对象 = open('文件名','使用方式') ...

  6. java 开发体系参考学习

    https://www.oschina.net/question/2663968_2283797

  7. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  8. Unity 在Inspector面板,脚本前面的激活对勾

    写个脚本,把它挂在一个游戏对象上: using System.Collections; using System.Collections.Generic; using UnityEngine; pub ...

  9. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  10. (转)Nagios 配置及监控

    Nagios 配置及监控 原文:http://blog.csdn.net/linuxlsq/article/details/52606824 Nagios 监控 在互联网日益发展的今天,监控的重要性已 ...