首页 > 代码库 > 百度开源项目插件 - Echarts 图表

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

2024-09-19 18:28:55   217人阅读

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


联系
我们