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、混合輸出
代碼參見示例程序，此處略

四、資源文件
資源下載地址