<!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. vue项目中禁止移动端双击放大，双手拉大放大的方法

    在vue打包后生成的dist目录文件下下面有index.html 打开里面 把原来的这个 <meta name=viewport content="width=device-width ...

  2. vscode 配置 java utf-8 编码

    utf-8 编码 和 lombok 的 配置 "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseS ...

  3. hdu6441 Find Integer 求勾股数 费马大定理

    题目传送门 题目大意: 给出a和n,求满足的b和c. 思路: 数论题目,没什么好说的. 根据费马大定理,当n>2时不存在正整数解. 当n=0或者1时特判一下就可以了,也就是此时变成了一个求勾股数 ...

  4. layer 弹出对话框 子父页面相互参数传递

    转载:https://blog.csdn.net/flybridy/article/details/78610737

  5. Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.

    查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  6. my02_Atlas mysql5.7安装配置

    软件环境:centos7.3,glib-2.49,lua5.1,Atlas2.2.1,mysql5.7 依赖包安装******************************************* ...

  7. 17-----BBS论坛

    BBS论坛(十七) 17.首页导航条实现和代码抽离 (1)temlates/common/_head.html <meta name="csrf-token" content ...

  8. Javascript各种事件汇总

    https://www.cnblogs.com/diligenceday/p/4190173.html#undefined https://www.cnblogs.com/starof/p/40663 ...

  9. 关于JAVA的基本知识

    TCP/IP 协议族常用协议 应用层:TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 等等 传输层:TCP,UDP 网络层:IP,ICMP,OSPF,EIGRP,IGMP 数据链 ...

  10. [转]how can I change default errormessage for invalid price

    本文转自:http://forums.asp.net/t/1598262.aspx?how+can+I+change+default+errormessage+for+invalid+price I ...