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