使用Echarts總結之——使用柱狀圖和地圖與後臺資料互動
一、引入js
當然首先肯定是要引入相關的echart,
簡單的開發基本上一個<script language="javascript" type="text/javascript" src="${base}/echarts/dist/echarts-all.js"></script>就足夠了
至於需要哪些echart相關檔案放入到專案中，通過官網下載echarts(這裡是echarts-2.27)，將build目錄下所有檔案拷貝到專案中，然後引用echarts-all.js就可以
二、開發
1》開發柱狀圖：
1、jsp或html頁面，寫一個存放圖的地方
如：<div id="myEchart" style="height:500px;"></div>
2、js內容：主要也就是呼叫主要的option，這個可以直接從Echat自帶的例項中獲取，用哪個取哪個
如柱狀圖例子：
var myChart,option;
function queryDataTest(){
//獲取圖表位置
myChart = echarts.init(document.getElementById("myEchart"));
option = {..........}//這裡內容可以直接從Echat自帶的列子中取
myChart.setOption(option);//將圖表內容格式內容放入到myChart位置
myChart.hideLoading();
getChartData();//aja後臺互動
}
//後臺互動
function getChartData(){
//獲得圖表的options物件
var options = myChart.getOption();
var param1 = $("#param1
").val();
var param2= $("#param2").val();
var _data = {"param1":param1,.....};這裡可以加請求的引數
//通過ajax獲取資料
$.ajax({
type:"post",
async:false,
url:base + "/monitor/RegUser_test.do",//請求路徑
dataType:"json",//返回資料形式為json
data:_data,
success:function(result){
if(result){
options.legend.data = result.legend; //legend賦值資料
options.xAxis[0].data=
result[0].xdata；//x軸賦值資料
options.series[0].data= result[0].data；//y軸賦值資料
myChart.hideLoading();
myChart.setOption(options);
}
}，
error:function(errorMsg){
alert("圖表請求資料失敗啦!");
myChart.hideLoading();
}
})
}
3.java 後臺程式碼
List<EchartData> echartDataList = new ArrayList<EchartData>();
EchartData echart = new EcharData();
echart.setLegend("增長量");
echart.setXdata(new ArrayList<String>(Arrays.asList("北京","天津".................)));//裡面值填充陣列 datas = new String[]{"北京","天津"....}
echart.setData(new ArrayList<Integer>(Arrays.asList(2,7,8....)));//裡面值填充陣列 datas = new Integer[]{2,7,8.....}
echartDataList.add(echart);
return JSONArray.fromOjbect(echartDataList);//將值一json格式返回
EchartData.java 程式碼
private Stringlegend;
private List<String> xdata;
private List<Integer>data;
public EchartData(){}
public EchartData(String legend, List<String> xdata, List<Integer> data){
this.legend = legend;
......
}
生成get /set
OK 效果圖：
1》開發地圖：
步驟都一樣，賦值的時候
關鍵是在賦值的時候，地圖 的資料是 data:[{name:'北京',value:20}............]這樣的形式name和value,並且省直轄市的名稱必須按照自帶的名稱一樣，不然資料出不來，順序可以隨便排序
注：省份欄位名（北京, 天津, 上海, 重慶, 河北, 河南, 雲南, 遼寧, 黑龍江, 湖南, 安徽, 山東, 新疆, 江蘇, 浙江, 江西, 湖北, 廣西, 甘肅, 山西, 內蒙古, 陝西, 吉林, 福建, 貴州, 廣東, 青海, 西藏, 四川, 寧夏, 海南, 臺灣, 香港, 澳門）
java後臺程式碼：可以用一個list封裝資料
List<DataAnlysPicDomain> dataAnlysList = regUserService.getDataAnlysList(引數);
JSONArray.fromObject(dataAnlysList);
DataAnlysPicDomain.java
private String name;
private Integer value;
get set方法
在ajax請求直接
success:function(result){
if(result){
options.series[0].data = result;//賦值
myChart.hideLoading();
myChart.setOption(options);
}
}
