1.引入Echarts的相关.js文件
示例:<script type="text/javascript" src="js/echarts.js"></script>
2.准备一个具备大小(宽高)的DOM
示例:<div id="main" style="width: 600px;height:400px;"></div>
3.通过echarts.init()方法初始化一个echarts实例;
实例:var myChart = echarts.init(document.getElementById('main'));
4.简单实例:
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
2异步动态加载数据
var urls='user2_sexGroup.action';
var myChart3 = echarts.init(document.getElementById('second_left'));
myChart3.showLoading({text:'亲,不要急!!正在拼命的读取数据中...'});
$.ajax({
url:urls,
dataType:"json",
success:function(data){
var json = eval('(' + data + ')');
myChart3.setOption({
title:{
text:json.third
},
xAxis: {
data: json.first
},
series: [{
// 根据名字对应到相应的系列
name: '年龄分布',
type: 'bar',
data: json.second
}]
});
myChart3.hideLoading();
}
});
// 初始 option
var option3 = {
/* title: {
text:'用户性别分布'
}, */
tooltip: {},
legend: {
data:['年龄分布']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar',]},//'stack','tiled'
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '年龄',
type: 'bar',
data: []
}]
};
myChart3.setOption(option3);
后台写法
public String yearGroup(){
List<Long> list=userService.yearGroup();
List<String> list2=userService.selectUserMesOrder();
List<String> list3=new ArrayList();
for(String a:list2){
list3.add(a+"年");
}
Map<String,Object> map = new HashMap<String,Object>();
map.put("first", list3);
map.put("second", list);
map.put("third", "用户年龄分布图");
JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据
results = json.toString();//给result赋值,传递给页面
return "JSONRESULT";
};