Echarts3简单封装及其调用示例

在项目使用了Echarts3进行图形显示，为方便程序调用，对Echart3进行了简单的封装，以方便调用。

一、前期准备
1、使用echarts3之前先要引入echarts.js，可以到官网下载
下载地址：echart3下载
2、在head中加入

<script type="text/javascript" src="./static/echarts-3/echarts.js"></script>

3、在body中加入一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。

<div id="picShow" class="app_content" style="width:100%;height:400px;"></div>

4、在script中获取div容器的id，根据需要写option中的参数，使用setoption生成图表。

<script type="text/javascript">    // 基于准备好的dom，初始化echarts实例    var myChart = echarts.init(document.getElementById('picShow'));    // 指定图表的配置项和数据    var option = ${picDataInfo };    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);</script>

5、在serverlet中调用

EchartsBar bar = new EchartsBar();bar.getTitle().setText("周销售情况");bar.getTitle().setSubtext("服务器");String[] legendData = { "意向", "预购", "成交" };bar.getLegend().setData(legendData);String[] xData = {"周一", "周二", "周三", "周四", "周五", "周六", "周日"};XAxis xAxis = new XAxis("统计项", 30);xAxis.setDataList(xData);Serie serie = new Serie("实时值", "line");YAxis yAxis = new YAxis("销量");yAxis.setInterval(20);yAxis.setFormatter("{value} 台");List<Data> dataList = new ArrayList<Data>();......serie.setDataList(dataList);bar.getxAxis().setDataList(xAxis);bar.getSeries().addSerieList(serie);// 传输到页面显示request.setAttribute("picDataInfo", bar.getJsStr());

二、解决以下几点问题
1、在程序中直接指定柱状图各个柱状的颜色
2、在折线图中对于无对应数据项的内容在输出的图形中予以屏蔽，具体展示为分段折线图
3、可柱状图、折线图可混合显示
4、后期将继续完成“饼图”、“堆积图”、“地图”等图形显示的封装
三、调用示例
1、生成柱状图
代码示例，参见EchartsBar.java：

EchartsBar app = new EchartsBar();app.getTitle().setText("周销售情况");app.getTitle().setSubtext("服务器");String[] legendData = {"意向", "预购", "成交"};app.getLegend().setData(legendData);String[] xData = {"周一", "周二", "周三", "周四", "周五", "周六", "周日"};XAxis xAxis = new XAxis("统计项", 30);xAxis.setDataList(xData);app.setxAxis(xAxis);YAxis yAxis = new YAxis("销量");yAxis.setInterval(20);yAxis.setFormatter("{value} 台");app.setyAxis(yAxis);List<Data> dataList = new ArrayList<Data>();//定义显示值、颜色及格式dataList.add(new Data(20, "#C1232B", "{b}\\n{c}"));dataList.add(new Data(26, "#27727B", "{b}\\n{c}"));dataList.add(new Data(32, "#60C0DD", "{b}\\n{c}"));dataList.add(new Data(54, "#FF0000", "优秀\\n{b}\\n{c}"));dataList.add(new Data(40, "#C6E579", "{b}\\n{c}"));dataList.add(new Data(10, "#26C0C0", "{b}\\n{c}"));dataList.add(new Data(18, "#0000FF", "{b}\\n{c}"));Serie serie = new Serie("成交");serie.setDataList(dataList);app.getSeries().addSerieList(serie);

2、生成折线图
示例代码，参见EchartsLine.java

EchartsLine app = new EchartsLine();app.getTitle().setText("周销售情况");app.getTitle().setSubtext("服务器");String[] legendData = {"意向", "预购", "成交"};app.getLegend().setData(legendData);String[] xData = {"周一", "周二", "周三", "周四", "周五", "周六", "周日"};XAxis xAxis = new XAxis("统计项", 30);xAxis.setDataList(xData);app.setxAxis(xAxis);YAxis yAxis = new YAxis("销量");yAxis.setInterval(20);yAxis.setFormatter("{value} 台");app.setyAxis(yAxis);List<Data> dataList = new ArrayList<Data>();dataList.add(new Data(20, "#C1232B", "{b}\\n{c}"));dataList.add(new Data(26, "#27727B", "{b}\\n{c}"));dataList.add(new Data());//无数据输出dataList.add(new Data(54, "#FF0000", "优秀\\n{b}\\n{c}"));dataList.add(new Data(40, "#C6E579", "{b}\\n{c}"));dataList.add(new Data(10, "#26C0C0", "{b}\\n{c}"));dataList.add(new Data(18, "#0000FF", "{b}\\n{c}"));Serie serie = new Serie("成交", Serie.LINE);serie.setDataList(dataList);app.getSeries().addSerieList(serie);

3、混合输出
代码参见示例程序，此处略

四、资源文件
资源下载地址