码迷,mamicode.com
首页 > 其他好文 > 详细

百度开源项目插件 - Echarts 图表

时间:2017-05-06 10:27:12      阅读:596      评论:0      收藏:0      [点我收藏+]

标签:方法   png   handle   using   eric   pre   func   pen   cross   

<!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 图表

标签:方法   png   handle   using   eric   pre   func   pen   cross   

原文地址:http://www.cnblogs.com/chirs888888/p/6815658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!