百度开源项目插件 - Echarts 图表
Posted Dang夏
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度开源项目插件 - Echarts 图表相关的知识，希望对你有一定的参考价值。
<!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 图表的主要内容，如果未能解决你的问题，请参考以下文章