当前位置：首页 > 资讯评论

echarts 源码（echarts介绍）

全部评论(3)

阿里
1.客户端通过ajax发送请求 先绘制一个最简单的Echarts图表： （这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码） <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <htmllang="zh-CN"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>ECharts</title>  <scripttype="text/javascript"src="echarts.min.js"></script>  <scripttype="text/javascript"src="jquery-1.12.3.js"></script> </head> <body>  <divid="main"style="width:600px;height:400px;"></div> <scripttype="text/javascript"> varmyChart=echarts.init(document.getElementById('main')); //显示标题，图例和空的坐标轴 myChart.setOption({ title:{ text:'异步数据加载示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:[] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[] }] }); </script> </body> </html> 看到了吧，现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。 下面贴上补充了ajax部分的完整前端代码： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <htmllang="zh-CN"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>ECharts</title>  <scripttype="text/javascript"src="echarts.min.js"></script>  <scripttype="text/javascript"src="jquery-1.12.3.js"></script> </head> <body>  <divid="main"style="width:600px;height:400px;"></div> <scripttype="text/javascript"> varmyChart=echarts.init(document.getElementById('main')); //显示标题，图例和空的坐标轴 myChart.setOption({ title:{ text:'异步数据加载示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:[] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[] }] }); myChart.showLoading();//数据加载完之前先显示一段简单的loading动画 varnames=[];//类别数组（实际用来盛放X轴坐标值） varnums=[];//销量数组（实际用来盛放Y坐标值） $.ajax({ type:"post", async:true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url:"TestServlet",//请求发送到TestServlet处 data:{}, dataType:"json",//返回数据形式为json success:function(result){ //请求成功时执行该函数内容，result即为服务器返回的json对象 if(result){ for(vari=0;i<result.length;i++){ names.push(result[i].name);//挨个取出类别并填入类别数组 } for(vari=0;i<result.length;i++){ nums.push(result[i].num);//挨个取出销量并填入销量数组 } myChart.hideLoading();//隐藏加载动画 myChart.setOption({//加载数据图表 xAxis:{ data:names }, series:[{ //根据名字对应到相应的系列 name:'销量', data:nums }] }); } }, error:function(errorMsg){ //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }) </script> </body> </html> 2.服务器端Servlet接收请求 客户端的请求url是’TestServlet‘，那我们得先在web.xml配置以下映射： <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>test.TestServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/TestServlet</url-pattern> </servlet-mapping> 然后就来着手写处理客户端请求的TestServlet啦！ 3.生成json数据并返回给客户端 生成Json数据要用到额外的jar包，这里我使用的jackson，json-lib2010年就没有再更新了…（2016-5-3日更：发现Google出品的Gson也蛮好用的，重点是很小巧，只需引入一个jar就搞定，用法也很简单） 简单介绍一下jackson的用法： ①：先去http://mvnrepository.com/下载jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了…这三个jar让我一阵好找） ②：在项目的项目WEB-INF/lib下引入这三个jar 然后就可以在TestServlet里使用jackson提供的工具类了。（关于jackson的详细用法，这里贴一下官网教程：http://wiki.fasterxml.com/JacksonInFiveMinutes） TestServlet代码如下： packagetest; importjava.io.IOException; importjava.util.*; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importcom.fasterxml.jackson.databind.ObjectMapper; publicclassTestServletextendsHttpServlet{ @Override protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{ doPost(req,resp); } @Override protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{ List<Product>list=newArrayList<Product>(); //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合 list.add(newProduct("衬衣",10)); list.add(newProduct("短袖",20)); list.add(newProduct("大衣",30)); ObjectMappermapper=newObjectMapper();//提供java-json相互转换功能的类 Stringjson=mapper.writeValueAsString(list);//将list中的对象转换为Json格式的数组 //System.out.println(json); //将json数据返回给客户端 response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json); } TestServlet类中用到的自定义的Product类代码如下： packagetest; publicclassProduct{ privateStringname;//类别名称 privateintnum;//销量 publicProduct(Stringname,intnum){ this.name=name; this.num=num; } publicStringgetName(){ returnname; } publicvoidsetName(Stringname){ this.name=name; } publicintgetNum(){ returnnum; } publicvoidsetNum(intnum){ this.num=num; } } 4.客户端接收数据后显示 客户端接受服务器数据并解析后，就可以正常显示图表数据了：
2021-02-24 22:05:01

萨满祭司
var json='[{name : "广州", value : 38}]';//后台返回的json串格式 var data = eval('('+json+')');//这个就是想要的格式 alert(data[0]['name']);
2021-02-12 01:26:24

dfgj
echarts 地图官方实例，既然是官方实例为什么找不到地方下载！改好页面代码发现还缺JS文件,配置参数等等,官方实例贴出的是关键代码，并不是全部代码．．．．echarts.js这个文件你要下载并引用的．截图上的第一个例子我最近搞过，看一下echarts的API和配置项手册，其实不难理解．我之前也没有接触过，上手不难．
2021-02-12 01:26:24

商品推荐