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、混合输出 代码参见示例程序，此处略

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