《【2017年整理】echarts基本使用》由会员分享，可在线阅读，更多相关《【2017年整理】echarts基本使用（11页珍藏版）》请在金锄头文库上搜索。
1、1、下载做图表时，用到的类库；2、采用标签引入的方式（* 只需要引入 echarts-all.js 文件即可）；3、在截取节点的时候，不能使用 JQ 类库，必须使用原生的 javascript；4、采用标签的引用方式：-标签式引入环境中，常用模块的引用可通过命名空间直取，与模块化下的路径结构一样如：echarts.config = require(echarts/config)， zrender.tool.color = require(zrender/tool/color)-实例：http:/ 之前写过一篇关于 HighCharts 的博文，此次新系统也需要做统计图表了， HighChart
2、s 需要授权的，所以此次也不用这个版本了。百度的 Echarts 也很不错，大概看了一下，和HighCharts 的风格没什么差别。从昨天开始研究了一下，也查了一些资料，这里集成java 语言，做了一个 demo。我这里做的是 tag 标签的写法，为了更加通用，这里也分享给大家了。所需要的包，可以直接下载，东西挺多的，按需引入。开始上代码。首先是 tag，这个东西，大学之后，几乎不怎么用了，没想到现在又用到了。123456789101112131415161718192021222324252627282/ 基于准备好的 dom，初始化 echarts 图表var myChart = echa
3、rts.init(document.getElementById($container);var option=title : text: $title,subtext: $subtitle,tooltip : 93031323334353637383940414243444546474849505trigger: axis,legend: data:,toolbox: show : true,feature : mark : show: true,dataView : show: true, readOnly: false,magicType : show: true, type: line
4、, bar,restore : show: true,saveAsImage : show: true,calculable : true,xAxis : type : category,boundaryGap : false,data : 15253545556575859606162636465666768697071727,yAxis : type : value,axisLabel : formatter: value ,series : ;/采用 ajax 异步请求数据$.ajax(type:post,url:$urls,dataType:json,success:function(
5、result)if(result)/将返回的 category 和 series 对象赋值给 options对象内的 category 和 seriesoption.xAxis0.data = result.axis;374757677787980818283option.legend.data = result.legend;var series_arr=result.series;for(var i=0;i写 tag 需要引入 jstl 包，谷歌下就有了。 1.2 之前需要两个包，一个 jstl，一个standard。1.2 之后貌似合并为一个了。 这句的写法也有点不同。为防万一，我是引入
6、的两个包。使用 ajax 请求，需要引入 jquery 的包，引入 echarts 的时候，同时引入这个。在上面代码中，最主要的还是标红的那段，series 是一个数组，后台加入多组数据的时候，这里需要遍历取出。jsp 页面引入该标签：123456789101112131415161718前端的部分到此算是完成，然后就是后台部分了。后台用两个 java 对象，封装一下要传递的数据：123456789101112131415161718192021packagebean.newseries;importjava.util.ArrayList;importjava.util.List;/* Cre
7、ated by on 2014/11/25.*/publicclassEcharts publicList legend = newArrayList();/数据分组publicList axis = newArrayList();/横坐标publicList series = newArrayList();/纵坐标publicEcharts(List legendList, List categoryList, List seriesList) super();this.legend = legendList; this.axis = categoryList;this.series = s
8、eriesList;这里放 series 的具体数据：123456789101112131415161718packagebean.newseries;importjava.util.List;/* Created by on 2014/11/25.*/publicclassSeries publicString name;publicString type;publicList data;publicSeries(String name, String type, List data) this.name = name;this.type = type;this.data = data;后台
9、业务中，将自己的数据，放到对象中，然后转换成 json 格式：123456789101112131415161718192021222324packagetagservlet;importbean.newseries.Echarts;importbean.newseries.Series;importcom.fasterxml.jackson.databind.ObjectMapper;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpSe
10、rvletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;/* Created by on 2014/11/24.*/publicclassNewTagServlet extendsHttpServlet protectedvoiddoPost(HttpServletRequest request
11、, HttpServl2526272829303132333435363738394041424344etResponse response) throwsServletException, IOException List legend=newArrayList(Arrays.asList(newString最高值,最低值);List axis=newArrayList(Arrays.asList(newString周一,周二 ,周三,周四,周五,周六,周日);List series=newArrayList();series.add(newSeries(最高值,line,newArrayL
12、ist(Arrays.asList(21,23,28,26,21,33,44);series.add(newSeries(最低值,line,newArrayList(Arrays.asList(-2,-12,10,0,20,11,-6);Echarts echarts=newEcharts(legend,axis,series);ObjectMapper objectMapper=newObjectMapper();System.out.println(objectMapper.writeValueAsString(echarts);response.setContentType(text/h
13、tml;charset=utf-8);PrintWriter out=response.getWriter();out.println(objectMapper.writeValueAsString(echarts);out.flush();out.close(); protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException this.doPost(request,response);这个里面，用 jackson 将对象转为 json 格式字符串，输出到页面即可。自此，图表就可以顺利生成了。上面业务里面，还可以做的更通用一些。作为示例，这里先写到这里。
