一、引入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);
}
}